Course Assignment

Introduction

Welcome to the Front-End Web Development industry knowledge course assignment, where you will have the opportunity to apply your acquired skills to address real-world challenges in your community. In this assignment, you are tasked with identifying a problem within your community and creating a Minimum Viable Product (MVP) using web technologies. Whether you choose to work individually or in groups, this assignment will empower you to showcase the value you can create in the real world.

Assignment Overview

Goal

The goal of this assignment is to leverage your front-end web development skills to design and develop an MVP that addresses a specific problem within your community. By the end of this assignment, you should be able to demonstrate your ability to create user-centered web solutions.

Learning Outcomes

By completing this assignment, you will achieve the following learning outcomes:

  • Apply HTML, CSS, and JavaScript to build a user-friendly web application.
  • Utilize web technologies to create a functional MVP.
  • Collaborate with team members or work independently to solve community problems.
  • Gain hands-on experience in user interface design and development.
  • Deploy your web application to a hosting platform for public access.

Assignment Details

Problem Identification

  1. Begin by identifying a problem or challenge within your community that can be addressed using web technologies. Consider issues that affect people’s daily lives or provide value to your community.

  2. Define the problem clearly and explain why it is essential to address it. Understand the target audience for your solution.

MVP Development

  1. Design and develop a Minimum Viable Product (MVP) that serves as a practical solution to the identified problem. Your MVP should include a user-friendly web interface.

  2. Implement HTML, CSS, and JavaScript to create the front-end of your web application. Ensure that your design is responsive and accessible.

  3. Integrate relevant features and functionalities that address the problem effectively. User interaction and feedback should be considered.

  4. Test your MVP thoroughly to identify and fix any bugs or usability issues. Employ front-end testing libraries if necessary.

  5. Deploy your web application to a hosting platform to make it accessible to your community members and stakeholders.

External Advisory

  1. Benefit from the guidance of an external advisory with decades of experience in software development. Seek their advice on design, development, and project management aspects. You can schedule a meeting with your advisory from 15:00 via teams.

Optional Success Criteria

  1. While the primary focus is on creating a functional MVP, consider the following optional success criteria to enhance your project:

    • Conduct end-to-end (e2e) tests for critical user journeys within your application.
    • Create a staging environment for your project.
    • Implement fluid animations in your user interface.
    • Optimize media assets for web usage.
    • Incorporate loading states within your web application.
    • Provide support for form auto-complete.

Technical Requirements

  1. Adhere to the following technical requirements:

    • Choose an CSS Framework to style your web application.
    • Host your project on an Static Host for public access.
    • Use an Design Application for UI/UX design tasks.
    • Utilize an Planning Application to manage your project tasks and timelines.

Submission

  1. For the submission of your assignment, provide the following deliverables in the Moodle delivery window:

    • A link to your deployed production website (Netlify, Vercel, GitHub Pages, etc.).
    • A link to your public GitHub repository.
    • A comprehensive project report describing your MVP, its functionalities, and the problem it addresses.
    • A link to a high-fidelity design (if applicable).

  2. Optional deliverables that can enhance your submission:

    • A link to your project report.
    • A Gantt chart or Kanban project board showcasing your project timeline.
    • A video summary explaining your project.
    • Links to low-fidelity and prototype designs (if applicable).
  • React for building user interfaces.
  • Vitest with React Testing Library (RTL) for front-end testing.
  • Cypress for end-to-end (e2e) testing.
  • TanStack/Query for data management.
  • Tailwind CSS for styling.
  • Shadcn UI.
  • formkit
  • auto-animate for fluid animations.
  • MSW (Mock Service Worker) for mocking API calls.
  • React Router for navigation.

Ideas for Inspiration

Community Health and Wellness Hub: Develop a website that provides valuable health and wellness information to community members. Include resources on nutrition, fitness, mental health, and local healthcare providers. Consider integrating features like fitness trackers, healthy recipe generators, and virtual support groups.

Environmental Sustainability Tracker: Build a web app that encourages environmentally friendly practices within the community. Users can input data on their eco-friendly activities, such as recycling, reducing energy consumption, or participating in clean-up events. The platform can track and visualize the community’s collective impact on sustainability.

Local Artisan Marketplace: Create an online marketplace for local artisans, crafters, and artists to showcase and sell their handmade products. Allow users to browse and purchase unique items while supporting local talent. Implement features like online payments and seller profiles.

Community Volunteer Network: Develop a platform that connects volunteers with local nonprofit organizations and community projects. Users can browse volunteer opportunities, sign up for events, and track their contributions. Include features for nonprofits to post volunteer needs and manage volunteers.

Educational Resource Center: Build a website that serves as a hub for educational resources. Offer free courses, tutorials, and study materials for students of all ages. Consider interactive quizzes, forums, and progress tracking to enhance the learning experience.

Mental Health Support Chatbot: Create a chatbot-driven mental health support platform. Users can interact with the chatbot to access resources, coping strategies, and self-help tools for managing stress and mental well-being. Implement anonymity and privacy features.

Local Farmers’ Market Online: Transform the traditional farmers’ market into an online platform where local farmers can list and sell their fresh produce and products. Enable users to place orders, schedule pickups, and support local agriculture.

Community Event Calendar: Develop a comprehensive community event calendar that lists local events, workshops, and gatherings. Allow users to submit and promote their events, and include features for event organizers to manage registrations and RSVPs.

Neighborhood Safety Network: Create a neighborhood safety network that empowers community members to report safety concerns, incidents, or suspicious activities. Include real-time alerts and a mapping feature to visualize safety incidents in the area.

Conclusion

This assignment offers you the chance to apply your front-end web development skills to make a meaningful impact on your community. Your creativity and problem-solving abilities will be put to the test as you create an MVP that addresses a real-world issue. Embrace this opportunity to showcase your talents and create a positive change in your community.

Good luck, and let’s build a better future together!