CSE 242: Web Development Project
Web Development Project Assignment
Objective:
Develop a web-based application using modern web development tools and frameworks. You are free
to propose your own project idea but must incorporate specific technologies and practices in your
development process.
Assignment Details
1. Project Proposal & Planning (10 Marks)
• Project Proposal (5 Marks): Write a brief description of your chosen idea and justify its
complexity. Outline the application’s core features and how you plan to use trending
technologies (1-2 pages).
• Wireframes & User Flow Diagrams (5 Marks): Create wireframes and user flow
diagrams to visually plan the application’s layout, navigation, and interaction flows.
2. Front-End Development (20 Marks)
• UI/UX Design & Responsiveness (5 Marks): Use React (or Vue/Angular) with Tailwind
CSS or Bootstrap. Ensure the application is fully responsive across devices, and
incorporates WCAG-compliant accessibility.
• Dynamic UI & State Management (5 Marks): Use state management solutions like
React Context, Redux, or Vuex to manage application state and display real-time data.
• TypeScript Usage (5 Marks): Implement TypeScript in the front-end code to enhance
code safety and readability.
• Additional Features (5 Marks): Add features like loading spinners, alerts, tooltips, or
animations for improved user experience.
3. Back-End Development (20 Marks)
• Set up a server using Node.js and Express.js or using Next.js (or Django if you
prefer Python).
• Implement at least three RESTful API endpoints that your frontend can interact
with.
• Include basic error handling and data validation for your API.
• Add a GraphQL endpoint for your backend API, allowing more flexibility in data
retrieval. (Optional Bonus – 5 Marks)
4. Database Integration (15 Marks)
• Integrate a database to store and manage your application's data.
• Use MongoDB (NoSQL) or PostgreSQL/MySQL (SQL) based on your project's needs.
• Implement at least one complex query that retrieves data based on specific criteria.
• Consider implementing GraphQL (Optional)
5. User Authentication and Security (15 Marks)
• Implement secure user authentication (e.g., login and signup) using JWT (JSON Web
Tokens) or OAuth2 or Firebase.
• Ensure password hashing and input validation to protect against vulnerabilities (e.g., SQL
Injection, XSS).
• Use HTTPS if deploying the project to ensure a secure connection.
6. Deployment and Hosting (10 Marks)
• Deploy your application on a hosting platform such as Heroku, Netlify, or Vercel.
• Ensure both frontend and backend are live and functional.
7. Documentation (5 Marks)
• Create documentation outlining your project setup, the technologies used, and step-by-
step instructions on running your project locally.
• Include API documentation if applicable.
8. Presentation and Code Quality (5 Marks)
• Maintain clear, readable, and well-documented code.
• Use Git and submit a link to your GitHub repository.
• Present your project in a 5–10-minute video walkthrough, explaining its features, design
choices, and challenges faced.
Groups
- Maximum 3 students are allowed in a group. Last date of group formation and form
submission – 02/03/25
Deliverables
Submission Requirements
• GitHub Repository: Submit a link to your GitHub repository with detailed commit history.
• Live Deployment: Provide a URL to the deployed application.
• Project Report: Submit a PDF report including your proposal, design documentation, setup
instructions, and reflections on what you learned.
Submission Checklist:
• Proposal Document (PDF)
• API Documentation
• Database Schema
• Live Project URL
• README File
• GitHub Repository Link
Due Date:
- Proposal - 25/06/25
- Wireframing: 03/07/2025
- Final Submission: 25/08/2024
- Final Presentation: 23/08/2025
Rubrics
Section Marks Description
Project Proposal 10 Idea clarity and feasibility
Frontend Development 20 Responsiveness, interactivity, and visual design
Backend 20 API functionality and structure
Database Integration 15 Database schema design and complex query
User Authentication & Security 15 Secure login system and data protection
Deployment and Hosting 10 Successful deployment and live project link
Documentation 5 Clear instructions and API documentation
Presentation & Code Quality 5
Code organization, readability, and project walkthrough
