Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/camilafbarcellos/fullstack-product-management
Frontend and a backend of a product management application.
https://github.com/camilafbarcellos/fullstack-product-management
backend frontend fullstack graphql management-system nestjs reactjs
Last synced: 1 day ago
JSON representation
Frontend and a backend of a product management application.
- Host: GitHub
- URL: https://github.com/camilafbarcellos/fullstack-product-management
- Owner: camilafbarcellos
- Created: 2024-08-08T16:59:54.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-09T02:31:40.000Z (3 months ago)
- Last Synced: 2024-08-09T20:33:14.670Z (3 months ago)
- Topics: backend, frontend, fullstack, graphql, management-system, nestjs, reactjs
- Language: TypeScript
- Homepage:
- Size: 1.27 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :globe_with_meridians: Product Management System
### [Setup](#rocket-setup) • [Technologies](#gear-technologies) • [Endpoints](#door-endpoints) • [Schemas](#bricks-schemas) • [Screenshots](#camera_flash-screenshots) • [Author](#star2-author)
## :information_source: About The App
Fullstack application developed for a simple product management system. The app offers the registration of new products and the listing of existing ones as the main functionality, and also provides all CRUD (Create, Read, Update, Delete) basic methods. It also has an automatic promotional pricing of products according to their category, following the table below:
| Category | Discount (%) |
|----------------|:-------------:|
| Smartphones | 2.55 |
| Furniture | 3 |
| Electronics | 4.3 |
| Appliances | 5 |
| Refrigerators | 7.5 |
Built using [TypeScript](https://www.typescriptlang.org/), the application has a **backend** powered by [Node](https://nodejs.org/en) and [NestJS](https://nestjs.com/), and employs [SQLite](https://www.sqlite.org/) for data storage. It also counts with [GraphQL](https://graphql.org/) for queries. The **frontend**, on the other hand, is constructed using [React](https://react.dev/) and [MaterialUI](https://mui.com/), ensuring a great user experience with a simple and intuitive interface, along with a fast **API communication** provided by [Axios](https://axios-http.com/).
### Features
- **Product management:** Users can read, register, modify, and delete products.
- **Automatic pricing:** The application dynamically calculates promotional prices based on the product category.
> When a price is changed, the promotional price will be recalculated.
> When the category is changed, the promotional price will be recalculated based on it.
- **GraphQL Embedded Playground:** Thanks to GraphQL, has a [embedded playground](http://localhost:3100/graphql) for queries.
> Or access the [Apollo Studio](https://studio.apollographql.com/sandbox/explorer) and place the same URL for a better experience.
- **Sorting and filtering:** Easily sort and filter the product list to find exactly what you need.
## :rocket: Setup
- Download or clone the repository
- In the project directory, open two terminals and follow the instructions below to setup both back and frontend
- Both terminals must be active to correctly run the application
### Backend
- In the first terminal, access the backend directory
```
cd backend/
```
- Download all required dependencies
```
npm i
```
- Run the API locally at [localhost:3100](http://localhost:3100)
```
npm start
```
### Frontend
- In the second terminal, access the frontend directory
```
cd frontend/
```
- Download all required dependencies
```
npm i
```
- Run the application locally at [localhost:3000](http://localhost:3000)
```
npm start
```
### SQLite Database
This project operates with an **SQLite database**, offering a simple and straightforward backend setup. There's no need to configure anything manually, as the **API**, constructed using **NestJS** and **TypeORM**, takes care of everything. It automatically generates a `db.sqlite` database file within the backend folder's root directory, which stores all the data managed by the application. If you need to restart the API, the database remains consistent, and it can also be deleted at anytime to a fresh restart along with the API if wanted so.
> **Obs.:* in some Linux environments, it may be necessary to install the `sqlite3` package!
## :gear: Technologies
## :door: Endpoints
### GraphQL Endpoint
| Route | Method | Description |
| --------------- | :----------: | ---------------------------------------------- |
| `/graphql` | POST | GraphQL queries and mutations |
### Products Endpoints
| Route | Method | Description |
| --------------- | :----------: | ---------------------------------------------- |
| `/products` | POST | Creates a new product |
| `/products` | GET | Gets all products |
| `/products/:id` | GET | Gets a specific product by its ID |
| `/products/:id` | PUT | Updates a specific product by its ID |
| `/products/:id` | DELETE | Deletes a specific product by its ID |
## :bricks: Schemas
### Product Entity
| FieldName | Type | Required |
|----------------|:---------:|:--------:|
| `id` | Number | true |
| `name` | String | true |
| `description` | String | true |
| `color` | String | true |
| `category` | String | true |
| `price` | Number | true |
| `promoPrice` | Number | true |
## :camera_flash: Screenshots
### List page
- Sorting table by name, category or price
- Filtering by name or category
- Modifying a product with automatic price calculator
- Removing a product
### Register page
- Submitting an invalid form
- Submitting a valid form
## :star2: Author
| 
|--
| Camila Barcellos