https://github.com/codeslator/webtroniclabs-test
WebtronicLabs technical test created with React + TypeScript + VIte + Redux + TailwindCSS
https://github.com/codeslator/webtroniclabs-test
Last synced: 5 months ago
JSON representation
WebtronicLabs technical test created with React + TypeScript + VIte + Redux + TailwindCSS
- Host: GitHub
- URL: https://github.com/codeslator/webtroniclabs-test
- Owner: codeslator
- Created: 2022-08-14T12:41:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-16T13:50:33.000Z (over 3 years ago)
- Last Synced: 2025-03-25T23:25:28.719Z (12 months ago)
- Language: TypeScript
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webtroniclabs-test
## Technical Test by WebtronicLabs - @codeslator (Andres Melendez)
### npm
```
npm install
```
## Run
```
npm run dev
```
## Features
- React 18 + Vite + TypeScript
- Tailwind CSS
- Custom UI Layout
- Persisted data in Redux Store + Redux Toolkit
- Routing with React Router DOM v6
- Resposive Design (Mobile first)
- JavaScript Fetch API to make requests
- Custom Hooks (useAuth, usePokemon, useTodo, useUI)
- Pokemon Page
- Browser theme (light/dark)
## Dependencies
- Redux Toolkit + React Redux -> To persist and handle data in a global store;
- Tailwind -> Provide multiple classes to use in UI development;
- Router DOM -> Allow handle the app routing;
## API's
- PokeAPI -> https://pokeapi.co/
- Todos -> https://jsonplaceholder.typicode.com/
## Tasks
- Create a React project ✅
- Use Flexbox ✅
- Create 3 components ✅
- Create routing ✅
- Configure routes for the 3 components ✅
- Add HTML navigation bar to route to each view ✅
- Add a user login form (just the user name) ✅
- Save user name to session storage ✅
- Add a guard and prevent a user from navigating unless session storage with the user name exists ✅
- Add HTTP interceptor and add 'Content-Type: application/json' to header ✅
- Read API path from environments file ✅
- Add a service that makes the following HTTP GET requests (Use Promises or RxJs) ✅
- Make use of that service in a new view ✅
- Display the title and completed status as a list ✅
- Add CSS class to differentiate between completed status ✅
- Use Redux or React Context to manage state ✅
- You can add your own spice to the project as you like ✅✅✅