Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marlinsk/jr-full-stack-developer-challenge
Full-stack project developed for evaluation in a recruitment process.
https://github.com/marlinsk/jr-full-stack-developer-challenge
axios back-end-development frameworks front-end-web-development jawascript nestjs nodejs npm prisma-orm radix radix-ui react react-hook-form sqlite swagger-ui tailwindcss typescript vitejs zod
Last synced: 5 days ago
JSON representation
Full-stack project developed for evaluation in a recruitment process.
- Host: GitHub
- URL: https://github.com/marlinsk/jr-full-stack-developer-challenge
- Owner: Marlinsk
- Created: 2023-05-20T04:28:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-26T05:00:19.000Z (about 1 year ago)
- Last Synced: 2024-11-10T02:14:07.531Z (2 months ago)
- Topics: axios, back-end-development, frameworks, front-end-web-development, jawascript, nestjs, nodejs, npm, prisma-orm, radix, radix-ui, react, react-hook-form, sqlite, swagger-ui, tailwindcss, typescript, vitejs, zod
- Language: TypeScript
- Homepage:
- Size: 252 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Full-stack web project with React.js & Nest.js.
A simple full-stack web project developed for practical knowledge testing of both back-end and front-end.
### 🛠 Technologies
- Nodejs
- Nestjs
- @nestjs/swagger
- Typescript
- PrismaORM
- Sqlite
- React
- Vite
- Typescript
- Axios
- React-Hook-Form
- Zod
- Tailwindcss
- Radix-ui
- Radix-icons
## After cloning the repository, follow these steps to download the dependencies
To proceed with this step, you need to have knowledge of terminal commands, npm, and VSCode.
**1º step:** Open the project in VSCode and then open two terminals, one for the backend folder and the other for the frontend folder
**2º step:** After accessing both folders in the terminal, enter the following command in both terminals:
```
npm i
```
> Once all dependencies have finished installing, both projects are ready to be executed. To understand how to run each one, follow the step-by-step guide below.
## 📙 Front-end Project Guide
To run the front-end application, go to the terminal where the frontend folder is open and type the following command:
```
npm run dev
```
> When the application starts running, click on the link shown in the terminal console to access the web application.
**Note:** To view the table, it's necessary for the backend to be running and have data in the database.
## 📙 Back-end Project Guide
To run the back-end application, go to the terminal where the backend folder is open and type the following command:
```
npm run start:dev
```
> If you want to run it without the dev mode, simply remove the :dev part.
Port on which the project runs
```
localhost:4015
```
> The project will run on port 4015. If you want to change it, go to the main file and modify the port. Note: If you change the port, make sure to also change it in the front-end in the src/api/Api.ts file.
### Accessing Prisma Studio
The database used in the project is SQLite, which is a database stored internally in the project folder, making it easy to connect to and can be accessed to modify table data using either **beekeeper studio** or **prisma**. For this case, we will use **prisma**.
To access Prisma Studio, go to the backend terminal and type the following command:
```
npx prisma studio
```
> After execution, a web page will open where you can access tables, create data, modify them, and delete them. To exit, simply close the tab in your browser and press **CTRL + C** in the terminal.
### Accessing the OpenAPI Documentation for HTTP Routes Online
To access the OpenAPI documentation, enter the following URL:
```
localhost:4015/doc
```
> In the OpenAPI documentation, you will see how to perform each **HTTP request** and view its response. If you want to put it into practice using Postman or Insomnia, you will need to take the schema for each URL route described in the documentation and copy the **JSON** to make **POST** and **DELETE** requests.
### Route Descriptions
Route Descriptions
**POST** Create Empresa (Create Company):
Creates a company.
> /empresa
**GET** Find Empresa by ID (Find Company by ID):
Displays the data of a company. You need to pass the company's ID through the Path Variables of the request.
> /empresa/:id
**GET** List All Empresas (List All Companies):
Lists all registered companies.
> /empresa
**PATCH** Update Empresa (Update Company):
In this route, you can update company data. You need to pass the company's ID through the Path Variables of the request and then pass the JSON in the request body. Please note that you don't need to include the ID in the JSON body, only in the path.
> /empresa/:id
**DELETE** Delete Empresa (Delete Company):
In this route, you can delete a company by providing the ID in the Path Variables.
> /empresa/:id