data编程代写、代做Java设计程序
Introduction
This final project is a comprehensive assignment designed to assess your mastery of web development concepts covered throughout the course. It is a significant undertaking that will require substantial time and dedication. Please read this document thoroughly before beginning and plan your schedule accordingly to ensure timely completion.
Overall Project Description
You will develop a Software as a Service (SaaS) web application that performs CRUD (Create, Read, Update, Delete) operations. The application must be based on React, Node.js, Prisma, and implement authentication using token cookies as learned in class.
Project Ideas: Online store, food ordering system, personal journal, learning management system, social network, etc.
Project Requirements
1. Security
●Authentication: Implement login and registration pages to allow users to create accounts and authenticate.
●Access Control: Some pages should be accessible to all users, while others should require authentication.
●Non-authenticated Users: Can access general features (e.g., view products, read reviews).
●Authenticated Users: Required for actions needing user identity (e.g., bookmarking, commenting, adding to cart).
●API Endpoints: Must use the token cookie approach as taught in class. No other security mechanisms are allowed.
2. Code Project Structure
Organize your project with the following folder structure:
●client folder:
○Contains all client-side code.
○Must use React; no other frontend frameworks are allowed.
○Include your unit tests here (see Testing section).
●api folder:
○Contains your API and all CRUD endpoints.
○Use Node.js and Prisma to connect to your database.
○The prisma folder will be within the api folder.
●accessibility_reports folder:
○Store your accessibility reports here (see Accessibility section).
●README file:
○Provide a project description and links to your deployed application.
○Include any special instructions necessary for running or testing your project.
3. External API Integration
●Requirement: Your React application must integrate with an external Web API for read-only operations.
●Examples: Google Maps, IMDb, YouTube, Yelp, Weather Channel, etc.
○A good starting point is RapidAPI
●Usage: Fetch data based on user input or interaction (example: get weather data based on location).
●Note: Use free tiers only. If you exceed the free tier limits, ensure your code correctly demonstrates the integration.
4. Accessibility
●Reports: Include Lighthouse accessibility reports for three pages.
●Tool: Use Google Lighthouse
●Submission: Save the reports in a readable format (image, PDF, etc.) within the accessibility_reports folder.
5. Testing
●Unit Tests: Implement at least three unit tests.
○Each test must target a different React component.
○Use React Testing Library for your tests.
●Location: Place all unit tests within the client folder.
6. Responsive Design
●Requirement: Your web application must be responsive and usable on desktops, tablets, and phones.
●Implementation: Ensure that web pages adapt seamlessly to any browser width.
7. Deployment
●Instructions: Follow the deployment guidelines provided here
●Components to Deploy:
○Database
○API Server
○Client Side
●Documentation: Provide deployment links in your README file.
Project Parts
Part 1: Project Planning
Deliverables:
1.Project Description:
a.A brief overview (maximum two paragraphs) of your project.
b.Outline intended functionalities and scope.
c.Must include at least one of each CRUD operation.
2.Database Diagram:
a.Include all tables with columns, primary keys (PK), and foreign keys (FK).
b.A minimum of three tables is required.
3.Pages and Endpoints:
a.List of Pages: Outline all pages you plan to build (e.g., homepage, profile page, details page).
b.List of API Endpoints: Specify all API endpoints you plan to implement.
c.Endpoint Usage: For each page, explain which API endpoints will be needed.
d.No need to specify the external API requirements here yet.
e.No need to specify what pages are for anonymous users or not.
Submission:
●Create a shared Google Doc containing all the items above and submit the google doc link in Canvas.
●No code is required for this part.
Grading Criteria (Total: 100 Points):
●Project Description (20%): The project is well-defined and achievable.
●Database Design (30%): Comprehensive and correctly models the application's data.
●Planning Thoroughness (50%): Detailed lists of pages and endpoints, showing thoughtful planning.
Part 2: Foundation Building
Now that you've defined your project requirements, begin coding the foundational elements.
Objectives:
●API Development (api Folder):
○Set up your three tables using Prisma.
○Implement the following endpoints:
■/ping: A simple endpoint to test API responsiveness.
■1 GET Endpoint: Lists all items.
■1 POST Endpoint: Inserts one item (separate from the register endpoint). This must use the requireAuth middleware.
○Authentication Endpoints:
■/login
■/register
■/logout
■requireAuth Middleware: Checks for the token cookie and returns a 401 error if the token is invalid.
●Client Development (client Folder):
○Authentication Pages:
■Register Page: Connects to the /register endpoint.
■Login Page: Accepts username and password, connects to the /login endpoint.
○Functional Pages:
■Homepage: Public page describing your website with links to login/register.
■Items List Page: Displays all items by connecting to the GET endpoint.
■Item Insertion Page: Allows insertion of a new item by connecting to the POST endpoint.
●Styling: No CSS styling is required at this stage; focus on basic functionality.
Grading Criteria (Total: 100 Points):
●API Development:
○Prisma tables set up correctly (10%)
○Authentication endpoints (/login, /register, /logout) (10%)
○GET endpoint implemented (10%)
○POST endpoint implemented (10%)
○requireAuth middleware used appropriately (10%)
●Client Development:
○Register page functionality (10%)
○Login page functionality (10%)
○Homepage accessibility and content (10%)
○Items list page functionality (10%)
○Item insertion page functionality (10%)
Part 3: Full Functionality and Refinement
This part requires the completion of all functionalities, ensuring the application is fully functional, secure, and user-friendly.
Objectives:
●Enhance UI/UX with CSS and Responsive Design (you can use CSS frameworks if you want)
●Implement All Remaining CRUD Operations
●Ensure All API Endpoints are Fully Functional
●Integrate External API Data
●Validate Data on Both Client and Server Sides
●Complete Unit Tests
●Finalize Accessibility Compliance
●Deploy the Application
Grading Criteria (Total: 100 Points):
1.CSS and User Interface (25%):
a.Consistent styling across all pages.
b.Responsive design for mobile, tablet, and desktop devices.
2.JavaScript and React Components (25%):
a.All React pages are fully functional.
b.Correct API integration for all endpoints.
c.Client-side data validation in forms.
3.API Endpoints (20%):
a.All endpoints are implemented and operational.
b.Data is correctly saved to the database.
c.Server-side data validation.
d.Secure endpoints protected with authentication middleware.
4.Security (10%):
a.Client correctly handles authentication using token cookies.
b.At least two API routes validate the token cookie for security.
5.Testing (5%):
a.At least three unit tests on the client side using React Testing Library.
b.Each test targets a different React component.
6.Web Accessibility (5%):
a.Lighthouse Accessibility scores of 80 or above for at least three pages.
b.Reports included in the accessibility_reports folder.
7.Deployment (5%):
a.Client, API, and database are deployed and accessible.
b.Deployment links provided in the README file.
8.Code Quality and Attention to Detail (5%):
a.Code is clean, readable, and well-organized.
b.Variable and function names are meaningful.
c.Unnecessary code and console logs are removed.
Submission Guidelines
●Part 1: Submit the shared Google Doc link in canvas.
●Parts 2 and 3: Please submit your complete project code through GitHub Classroom, ensuring that each part is submitted to its corresponding repository.
●Deadline: Refer to the course schedule for submission deadlines for each part.
Conclusion
This final project is an opportunity to showcase your understanding and application of web development concepts. Start early, plan thoroughly, and don't hesitate to reach out if you have any questions. Good luck, and I look forward to seeing your innovative solutions!
Remember: The key to success in this project is incremental development and testing. Build the foundational elements first, ensure they work correctly, and then add features progressively.