Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliolmuller/fuerza-nocturnal
Application in React. The main purpose of this project is to demonstrate front-end development skills, such as React structure, web API consumption and responsive design as a practical test applying to Fuerza Studio job.
https://github.com/juliolmuller/fuerza-nocturnal
react typescript zustand
Last synced: about 1 month ago
JSON representation
Application in React. The main purpose of this project is to demonstrate front-end development skills, such as React structure, web API consumption and responsive design as a practical test applying to Fuerza Studio job.
- Host: GitHub
- URL: https://github.com/juliolmuller/fuerza-nocturnal
- Owner: juliolmuller
- License: mit
- Created: 2022-01-29T18:21:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-10T03:52:38.000Z (about 3 years ago)
- Last Synced: 2024-11-15T01:34:14.807Z (3 months ago)
- Topics: react, typescript, zustand
- Language: TypeScript
- Homepage: https://fuerza-nocturnal.vercel.app/
- Size: 659 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Objectives |
Lessons Learned |
Technologies |
Environment Setup
This application was proposed by [Fuerza Studio](https://www.fuerzastudio.com.br/en/) as part of their recruitment process for frontend developers. The challenge was to build a fully responsive client application in React using TypeScript and consuming a fake REST API. The original statement cam be found [here](.github/statement.md).
[Check out the application running!](https://fuerza-nocturnal.vercel.app/)
## :pencil: Objectives
- [x] Build the UI based on [Figma's prototype](https://www.figma.com/file/NLTV0LaT4wTayhMusGZppT/Fuerza-Teste-(Copy)?node-id=0%3A1);
- [x] Use the fake *mirage* REST API (already set in the project) to simulate calls to a backend;
- [x] Implement a simple authentication system;
- [x] Make the UI responsive;
## :trophy: Lessons Learned
- Interaction with `mirage.js`*`;
- State management using `zustand`;
- Input label shrinking, similar to Material Design's;
## :rocket: Technologies & Resources
**Frontend:**
- [React 17](https://reactjs.org)
- [Zustand](https://zustand-demo.pmnd.rs/)
- [Axios](https://github.com/axios/axios) (HTTP client)
**Development:**
- [Visual Studio Code](https://code.visualstudio.com/)
- [Cmder](https://cmder.net/) (terminal emulator)
- [Node.js](https://nodejs.org/en/) scripts (with Laravel Mix)
## :hammer: Setting up the Environment
Make sure to have **Node.js 10+** installed in your machine and its **npm** available in the command line, then use the following command to install dependencies:
```bash
$ npm install
```
To execute the application, you must just configure a storage key for the authenticated user to be "maintained", although the fake backend is restarted on application refresh. The storage key is being pulled from environment variables, so create a `.env` file, at project root based on `.env.example`.
At last, you can use the following commands to run the application:
```bash
$ yarn start # Run development server
$ yarn build # Build files for production
```