This is the final project of the Introduction to Web Development course taught in the first semester of 2022.
This consists of a virtual sports shop, where users can buy things to practice their favorite sport and administrators can manage their products and users.
- Pedro Henrique Conrado - 11819091
- Victor Paulo Cruz Lutes - 11795512
- Gabriel Vicente Rodrigues - 11795377
Administrators are responsible for registering/managing administrators, customers, and products/services provided. The application already comes with an account admin with password admin.
Customers are users who access the system to buy products/services.
The admin record includes, at least: name, id, phone, email.
Each customer's record includes, at least: name, id, address, phone, email
Product/services records include, at least: name, id, photo, description, price, quantity (in stock), quantity sold. Your store may sell products, services or both (you decide)
Products are selected, their quantity chosen, and are included in a cart. Products are purchased using a credit card number (any number is accepted by the system). The quantity of product sold is subtracted from the quantity in stock and added to the quantity sold. Carts are emptied only on payment or by customers.
Administrators can create/update/read/delete (crud) new products and services. For example, they can change the stock quantity.
Our current idea is for the user to be able to see a 3d model of the product you want to buy
The system must provide accessibility requirements and provide good usability. The system must be responsive.
Our project is a sports products store. It allows admins and clients to login and clients to create their own account.
The clients are presented to the products of the store and are allowed to add them to their cart, change their personal data and buy the products on the cart.
The admins are allowed to change their personal data, register new admins and clients and manage the products of the store.
The images of the mockup are in the directory /mockups
You can also see our Figma, where we designed these screens.
- The user can log in using his email and password
- A new client can create his account
- The user can view and modify his personal data
- The admin can register, view, update and delete users and products
- The client can view the products available in the store
- The client can view information about a specific product
- The client can add a quantity of a product to his personal cart
- The client can buy the products present in his cart with a credit card
- The client can view a 3D model, if available, of a product
Info saved on the server:
- Id (PK)
- Name
- Email (Unique)
- Password
- Phone
- Address
- ProfilePicture
- IsAdmin
- Id (PK)
- Name
- Description
- Price
- Brand
- Size
- QuantityStock
- QuantitySold
- Image
- Image3d
- Category (insira produtos com a categoria "male", "female" ou "kids")
The code follows the structure below:
- src
- classes (Manipulate users, products and the cart)
- components (UI components used within one or more pages)
- pages (The component that structure the final page displayed to the user)
- global.css (Styles that are kept unchanged throught the entire system)
- index.js (Loads the application)
- reset.css (Reset default css)
- routes.js (Declares the pages and respective routes)
- variables.css (Common styles that can be used in the components)
To start the web application on localhost, run the following commands inside the folder sports-store-frontend:
npm installnpm start
This will install all dependencies and start a web server on port 3000, if available.
To start the server on localhost, run the following commands inside the folder sports-store-backend:
npm installnpm start
This will install all dependencies and start a server on port 3001, if available.
To log in as admin, use the following credentials:
- email: admin@admin.com
- password: admin
To log in as user, use the following credentials:
- gabriel_vr@usp.br
- 123456