This is the third challenge of the Compass scholarship program, in which the objective is to develop an application called Furniro. The project consists of a furniture store.
Click here to access the website
This project was developed with the following technologies and tools:
- HTML: Structuring the application pages and content;
- CSS: Styling pages to define layout and appearance;
- TypeScript: JavaScript superset that adds static typing for greater code safety and robustness;
- React: JavaScript library for building user interfaces, facilitating the development of reusable components;
- Tailwind CSS: CSS framework that allows fast and responsive styling using utility classes.
- Axios: HTTP client for making API requests;
- React DOM: Library for integrating React with the DOM;
- React Icons: Library for adding icons to React components;
- React Router: Library for managing routes in React (navigation between pages). Features such as login and registration.
- JSON Server: REST API simulator that allows you to test the application backend using a JSON file to temporarily store data.
- Login Button: Redirects the user to the shop page;
- Facebook: Button that redirects to the official Facebook page;
- Instagram: Button that redirects to the official Instagram page;
- LinkedIn: Button that redirects to the official LinkedIn page.
- The project includes loading spinners in asynchronous requests to provide visual feedback while content is loading.
furniro/
├── node_modules/ # Dependencies
├── public/ # logo
│ ├── index.html # Main website rendering file
│ ├── logo.png # Website logo
│ ├── manifest.json
│ ├── robots.txt
├── src/ # Application source code
│ ├── assets/ # Images
│ ├── components/ # Reusable components (header, footer, etc)
│ ├── data/ # db.json file as the mock Back-End
│ ├── pages/ # Application pages (Home, Login, Shop, etc.)
│ ├── App.tsx # Main component that renders the pages
│ ├── index.css # Main CSS file
| ├── main.tsx
├── .gitignore
├── package-lock.json
├── package-json
├── README.md
├── README.old.md
├── tailwind.config.js
├── tsconfig.json
- Clone the repository:
In the terminal, run the following command to clone the repository:
git clone https://github.com/Enne-Amore/furniro.git- Enter the project directory:
Navigate to the cloned project directory:
cd furniro- Install the dependencies:
To install the project dependencies, run:
npm i- Start the development server:
To start the development server, run:
npm startThe project will be available at http://localhost:3000.
How to Use: open your browser and go to http://localhost:3000 to view the running project.
- Start the Back-End simulator:
To start the Back-End simulator, run:
npm run backendThe database will be available at http://localhost:4000
In the application, you can: log in, view available products on the Store page, explore navigation through the menu, which includes links to pages such as Store and Contact.
Here are the colors used in the project, with their corresponding values and a visualization of them:
| Color | Hexadecimal |
|---|---|
| Brown | #B88F2E |
| Yellow-1 | #FAF2E8 |
| Yellow-2 | #FAF2EB |
| Yellow-3 | #FFF2E3 |
| Yellow-4 | #FCF7F2 |
| Gray-1 | #333333 |
| Gray-2 | #616161 |
| Gray-3 | #3B3B3B |
| Gray-4 | #9E9E9E |
| Gray-5 | #8A8A8A |
| Gray-6 | #242424 |
| Gray-7 | #F5F5F7 |
| Red | #E87070 |
Here are the fonts used in the project:
- Poppins
Usage example:
font-family: 'Poppins', sans-serif;or@apply font-poppins - Montserrat
Usage example:
font-family: 'Montserrat', sans-serif;or@apply font-montserrat
To contact me for support, my email is Enne.Pessoa@gmail.com