Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luandersonalvesdev/store-smartphone-manager

Full stack web project for a store smartphone manager.
https://github.com/luandersonalvesdev/store-smartphone-manager

bcryptjs chai docker express javascript jsonwebtoken mocha postgres reactjs sequelize tailwindcss vercel

Last synced: 9 days ago
JSON representation

Full stack web project for a store smartphone manager.

Host: GitHub
URL: https://github.com/luandersonalvesdev/store-smartphone-manager
Owner: luandersonalvesdev
Created: 2024-02-29T19:46:45.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-03-07T15:24:39.000Z (8 months ago)
Last Synced: 2024-10-11T22:41:19.143Z (about 1 month ago)
Topics: bcryptjs, chai, docker, express, javascript, jsonwebtoken, mocha, postgres, reactjs, sequelize, tailwindcss, vercel
Language: JavaScript
Homepage: https://page-store-smartphone-manager.vercel.app
Size: 779 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Lexart Full Stack Javascript Developer Challenger

This project was developed as a technical challenge for the Lexart junior full-stack developer position.
It is a full-stack web application designed for product management.

## Live Deployment
The application is currently deployed and accessible at [this link ↗️](https://page-store-smartphone-manager.vercel.app).
The application is fully deployed at [](https://vercel.com)

## Run locally

1. First of all, you need to have the [Docker](https://docs.docker.com/engine/install/ubuntu/) and [Docker Compose](https://docs.docker.com/compose/install/) installed.
2. Ensure that ports `3000`, `3001` and `5432` on your computer are available; otherwise, errors may occur.
3. Install all dependencies running:
```bash
npm run install:all
```
4. Inside each directory there is a `.env.example` file that you can configure manually or run the command:
```bash
npm run setup:env
```
5. Finally run:
```bash
npm run docker:up
```
#### Finished!

Now just go to [localhost:3000](http://localhost:3000/) that you will see something like that:

![healthy frontend](/assets/preview-frontend.png)

And go to [localhost:3001](http://localhost:3001/) that you will see something like that:

![healthy backend](/assets/preview-backend.png)

> The application will spin up three containers: one for the backend, one for the frontend, and one for the database.

## Database structure
See more
The database used was Postgres for its speed, versatility and easy use. The structure chosen was as follows.

![db-structure](/assets/preview-db.jpg)

## API Documentation

### Create a new account

![#f03c15](https://placehold.co/15x15/49CC90/49CC90.png) **POST**

```
/signup
```

Expected return

* status code `201`

```bash
{
"id": 1,
"username": "Jorel",
"token": "exampletoken.exampletoken.exampletoken"
}
```

___

### Log into

![#f03c15](https://placehold.co/15x15/49CC90/49CC90.png) **POST**

```
/login
```

Expected return

* status code `200`

```bash
{
"id": 1,
"username": "example",
"token": "exampletoken.exampletoken.exampletoken"
}
```

___

### Create a new product 🔒
> `Token` is required on `Authorization` header. Ex: `Baerer ${token}`

![#f03c15](https://placehold.co/15x15/49CC90/49CC90.png) **POST**

this route accept three different structures

1. First structure
```bash
{
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"price": 10000,
"color": "red"
}
```

2. Second structure
```bash
{
"name": "Xiaomi Redmi 9",
"price": 10000,
"details": {
"brand": "Xiaomi",
"model": "Redmi 9",
"color": "red"
},
}
```

3. Third structure
```bash
[
{
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"data": [
{
"price": 10000,
"color": "red"
},
{
"price": 10000,
"color": "blue"
}
]
},
{
"name": "Iphone 14 Pro",
"brand": "Iphone",
"model": "14 Pro",
"data": [
{
"price": 30000,
"color": "silver"
},
{
"price": 30100,
"color": "gold"
}
]
}
]
```

```
/dashboard/product
```

Expected return

* status code `201`

> this route can return two different structures

1. First structure
```bash
{
"id": 1
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"price": 10000,
"color": "red",
"userId": 1
}
```

2. Second structure
```bash
[
{
"id": 5,
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"price": 10000,
"color": "red",
"userId": 1
},
{
"id": 6,
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"price": 10000,
"color": "blue",
"userId": 1
},
{
"id": 7,
"name": "Iphone 14 Pro",
"brand": "Iphone",
"model": "14 Pro",
"price": 30000,
"color": "silver",
"userId": 1
},
{
"id": 8,
"name": "Iphone 14 Pro",
"brand": "Iphone",
"model": "14 Pro",
"price": 30100,
"color": "gold",
"userId": 1
}
]
```

___

### Get all products of user 🔒
> `Token` is required on `Authorization` header. Ex: `Baerer ${token}`

![#f03c15](https://placehold.co/15x15/61AFFE/61AFFE.png) **GET**

```
/dashboard/product
```

Expected return

* status code `200`

```bash
[
{
"id": 5,
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"price": 10000,
"color": "red",
},
{
"id": 6,
"name": "Xiaomi Redmi 9",
"brand": "Xiaomi",
"model": "Redmi 9",
"price": 10000,
"color": "blue",
},
{
"id": 7,
"name": "Iphone 14 Pro",
"brand": "Iphone",
"model": "14 Pro",
"price": 30000,
"color": "silver",
},
{
"id": 8,
"name": "Iphone 14 Pro",
"brand": "Iphone",
"model": "14 Pro",
"price": 30100,
"color": "gold",
}
]
```

___

### Update a product 🔒
> `Token` is required on `Authorization` header. Ex: `Baerer ${token}`

![#f03c15](https://placehold.co/15x15/FCA130/FCA130.png) **PUT**

```
/dashboard/product
```

Expected return

* status code `200`

```bash
{
"id": 4,
"name": "Xiaomi Poco F3",
"price": 2000,
"brand": "Xiaomi",
"model": "Poco F3",
"color": "Blue"
}
```

___

### Delete a product 🔒
> `Token` is required on `Authorization` header. Ex: `Baerer ${token}`

![#f03c15](https://placehold.co/15x15/F93E3E/F93E3E.png) **DELETE**

```
/dashboard/product/:id
```

Expected return

* status code `204`

```bash
empty return
```

___

### Get a user 🔒
> `Token` is required on `Authorization` header. Ex: `Baerer ${token}`

![#f03c15](https://placehold.co/15x15/61AFFE/61AFFE.png) **GET**

```
/user
```

Expected return

* status code `200`

```bash
{
"username": "Jorel"
}
```

## Tests

The API tests were run by the `Mocha`, `Chai`, and `Sinon`. Also `nyc` librarie that test file coverage.
There are both integration and unit tests for better security in future updates.

### Run

To run tests coverage use:
```bash
npm run test:api:coverage
```

If all happens well, you will see something like that:
![preview-test-api-coverage](/assets/preview-test-api-coverage.png)

## Design Pattern

### MSC Design Pattern in API Development
#### Overview
The MSC (Model, Service, Controller) architectural pattern provides a structured approach to building APIs by segregating responsibilities into distinct layers: Model, Service, and Controller. This separation enhances maintainability, facilitates easier troubleshooting, and promotes scalability within the application.

#### Model
The Model layer serves as the interface for database interactions. It encapsulates all database-related operations, such as querying, inserting, updating, and deleting data. By handling these tasks, the Model ensures data integrity and consistency while abstracting the database complexity from other layers.

#### Service
The Service layer encapsulates the business logic and rules of the application. It utilizes the functionalities provided by the Model layer and implements the core logic required to process requests. This layer orchestrates different operations, enforces business rules, and acts as an intermediary between the Controller and the Model.

#### Controller
The Controller layer serves as the entry point for incoming requests and handles the interaction with the client. It receives requests, processes input data, calls the appropriate Service methods, and generates responses to send back to the client. The Controller ensures that the responses adhere to the required format and contain the necessary information.

#### Advantages
- Maintainability: The separation of concerns allows for easier maintenance and updates. Each layer can be modified or expanded without affecting the others, facilitating code management.
- Scalability: The modular structure enables easy scalability as different layers can be scaled independently based on the application's requirements.
- Testing: The distinct layers facilitate unit testing, as each layer can be tested separately, promoting better test coverage and reliability.

## Password security

The API use [Bcrypt](https://github.com/dcodeIO/bcrypt.js#readme) the keep your password safe even if the database have a invasion.

The database dashboard:

![db-dashboard](/assets/preview-db-dashboard.png)

## Others details

Both the `/frontend` and `/backend` folders have their respective `README.md` for some more details. Visit to find out more.

___

Thank you for your attention.