Tasks and Duties
Objective: In this week's task, you are to undertake the foundational step of planning and designing the architecture for a web application project. Your task is to conceptualize a full stack web application idea, define its requirements, and develop comprehensive system architecture diagrams. This task will help you gain practical skills in planning, system design, and documentation which are crucial for a Full Stack Developer.
Deliverables: You are required to submit a single file (PDF or DOCX) that includes: a project brief outlining the application’s purpose and features, flowcharts depicting user interactions, detailed wireframes for the front-end design, and a technical architecture diagram illustrating both the front-end and back-end components, including the database schema. Ensure that you document your rationale for design decisions.
Key Steps: Begin by brainstorming and finalizing an application concept. Document your project objectives and required functionalities. Create flowcharts and wireframes using any digital tool of your choice. Develop diagrams that highlight how various components interact within the system. Describe key components including server-side operations, API endpoints, and database relationships. Compile all your findings and diagrams into a single well-organized document.
Evaluation Criteria: Your submission will be evaluated based on the clarity and depth of your project concept, the quality and completeness of your architectural diagrams, adherence to the task requirements, and the overall presentation of the document. Practical application of planning frameworks and clear, logical reasoning in your documentation is expected. This exercise should take you approximately 30-35 hours to complete.
Objective: This week, your focus is on developing a fully functional front-end for your web application. You will build a user-friendly interface that interacts seamlessly with underlying back-end services. The aim is to strengthen your practical skills in HTML, CSS, JavaScript along with any framework of your choosing (e.g., React, Angular, or Vue.js).
Deliverables: Submit a single compressed file (ZIP) containing all source code and a README file. Your README should clearly articulate your development process, any design patterns or libraries used, and instructions to run the application locally. The application should include at least three distinct views/pages such as a landing page, a user dashboard, and a detail view, all interconnected with appropriate navigation.
Key Steps: Begin with the initial setup of your project environment. Design a responsive layout using wireframes. Implement UI components and ensure interactivity through JavaScript or framework-specific methodologies. Test usability by simulating user interactions. Make sure your code is modular, documented, and meets current front-end best practices.
Evaluation Criteria: The task will be assessed on user interface design quality, responsiveness, accessibility, and overall interactivity. Code structure, proper documentation, and adherence to the best practices in front-end development will also be critical factors. The work period for this task should be around 30 to 35 hours.
Objective: This task is geared towards enhancing your back-end development skills. You are required to build a set of RESTful APIs that will support your web application's functionality. These APIs should handle typical CRUD operations and interface with a database. This task emphasizes practical experience with server-side programming and database interaction.
Deliverables: Submit a single file (ZIP containing a Git repository or structured folder) that includes the back-end source code, a clear README file with setup and execution instructions, and API documentation. The API documentation should detail endpoints, request methods, parameters, and expected responses in a clear, professional format.
Key Steps: Begin by selecting a back-end framework (such as Node.js with Express, Django, or Flask). Design your API endpoints considering secure authentication, error handling, and data validation. Create a relational or non-relational database schema that supports the application requirements. Write tests to verify the functionality of your APIs. Finally, document your API endpoints clearly.
Evaluation Criteria: Your submission will be evaluated on code quality, correctness and completeness of API functionalities, and comprehensiveness of API documentation. Efficient use of best practices in back-end development, error handling, and security measures are expected. The estimated duration to complete this task is 30-35 hours of focused work.
Objective: In this task, you will integrate the front-end application with the back-end APIs developed in previous tasks. Your goal is to build a cohesive full stack application where the user interface communicates effectively with the back-end services, ensuring dynamic data processing and real-time interaction.
Deliverables: Submit a compressed file (ZIP) that comprises both front-end and back-end source code, along with an updated README file outlining the integration process. The deliverable should include detailed instructions for setting up and running the entire integrated application locally. Additionally, include a short video demonstration (screen capture file) of the working application or a link to an online deployment if available.
Key Steps: Start by reviewing and ensuring that your front-end and back-end modules meet integration points. Implement asynchronous data fetching and proper state management. Test API endpoints from the user interface and handle exceptions gracefully. Ensure seamless data flow across layers and validate the application from both end-user and development standpoints. Document the challenges and solutions encountered during integration.
Evaluation Criteria: Submissions will be evaluated based on successful integration of front-end and back-end, quality and clarity of documentation, overall application performance, and adherence to best practices in full stack development. This task should empower you with practical experience in connecting and debugging different parts of a full stack application, and is expected to require about 30-35 hours of work.
Objective: The focus of this week is to emphasize the critical aspects of application testing, debugging, and performance optimization. You are required to develop and execute a series of test cases for both the front-end and back-end components. This task allows you to practice unit testing, integration testing, and to apply debugging techniques that improve code quality and application reliability.
Deliverables: Submit a compressed file (ZIP) that includes all the test scripts, error logs, debugging reports, and any configuration files necessary to run your test suite. Provide a detailed README explaining the testing strategies employed, instructions on how to run the tests, and a summary of optimizations implemented. Optionally, include a document outlining your debugging process and lessons learned.
Key Steps: Begin with writing unit tests for individual functions/components using suitable testing frameworks (e.g., Jest for JavaScript, Mocha, or PyTest). Develop integration tests to ensure that components work in concert. Use debugging tools and techniques to identify and fix errors. Optimize the code for performance by profiling various components and identifying bottlenecks. Finally, document the entire process, including the rationale behind each test case and the performance improvements made.
Evaluation Criteria: Your submission will be assessed on the completeness and accuracy of your test scripts, effectiveness of debugging measures, and clarity in documentation of the optimization process. Your work should demonstrate a thorough understanding of testing methodologies and the practical application of debugging techniques. This task is designed to enhance your ability to maintain high-quality code and is expected to take approximately 30 to 35 hours.
Objective: The final task focuses on the deployment and maintenance of your full stack application, along with a reflective analysis of your project. This exercise will allow you to gain hands-on experience in deploying a web application to a public hosting environment, ensuring that your project can be accessed and used outside the local development environment. Additionally, you should document the maintenance strategy and provide a project reflection.
Deliverables: Submit a single file package (ZIP) containing a deployment guide, maintenance documentation, and a project reflection report. The deployment guide should include detailed steps for deploying the application using a public platform (such as Heroku, AWS, or any similar service) and troubleshooting common deployment issues. The reflection report should be a comprehensive document discussing what went well, challenges faced, and improvements for future projects.
Key Steps: Prepare your application for deployment by ensuring that environment variables and configurations are production-ready. Follow best practices to secure your application. Deploy your application on a public server and verify its functionality by conducting user acceptance tests. Create a detailed maintenance plan that includes logging, error reporting, and update procedures. Finally, write a reflective analysis covering the entire development process, lessons learned, and areas for self-improvement.
Evaluation Criteria: Your submission will be evaluated based on the clarity and completeness of the deployment documentation, effectiveness of the maintenance strategy outlined, and the depth of your project reflection. Demonstrating a practical understanding of deploying, monitoring, and maintaining a full stack application will be crucial. This task is designed to simulate real-world deployment scenarios and is expected to require approximately 30 to 35 hours of work.