Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codeslator/firmavirtual-pokefront
FirmaVirtual Technical Test Pokemon App - Front-End - React + TypeScript + Tailwind
https://github.com/codeslator/firmavirtual-pokefront
Last synced: about 2 months ago
JSON representation
FirmaVirtual Technical Test Pokemon App - Front-End - React + TypeScript + Tailwind
- Host: GitHub
- URL: https://github.com/codeslator/firmavirtual-pokefront
- Owner: codeslator
- Created: 2024-06-02T14:19:52.000Z (8 months ago)
- Default Branch: devel
- Last Pushed: 2024-06-05T18:09:39.000Z (8 months ago)
- Last Synced: 2024-06-06T18:39:40.371Z (8 months ago)
- Language: TypeScript
- Size: 88.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FirmaVirtual PokeFront
Technical Test by **FirmaVirtual Mexico** - @codeslator (Andres Melendez) - WebApp built with **React + Vite + TypeScript** using **TailwindCSS + DaisyUI** to develop UI components and **TanStack React Query** to make requests to **FirmaVirtual PokeAPI**.
## Requirements
To run this app, you must have installed Node & NPM.
## Installation
This README has the instructions to install and execute this webapp. The first step is clone the repository from **GitHub**.
```bash
git https://github.com/codeslator/firmavirtual-pokefront.git
```
After clone the repository, you must to install all dependencies.
```bash
cd firmavirtual-pokefront
npm install
```
When dependencies are installed, before run the webapp in local, make sure you have the `.env` file in the repository with the following variables:
```
VITE_FIRMAVIRTUAL_API_URL=http://localhost:3000
```
After add environment variables, you can execute the Vite App using the following command:
```bash
npm run dev
```
If application started correctly, will be listen in **5173** port. Open in your Browser the following URL: `http://localhost:5173/`. Now the **React** created with **Vite** is running. Great!
Finally, you can start to navigate in the webapp. **Good job!**
## Directory Structure
The WebApp project has the following directory structure:
```
├── src
│ ├── apis
│ │ ├── firmaVirtualApi.ts
│ │ └── index.ts
│ ├── global
│ │ ├── ...
│ │ └── index.ts
│ ├── hooks
│ │ ├── ...
│ │ └── index.ts
│ ├── interfaces
│ │ ├── ...
│ │ └── index.ts
│ ├── router
│ │ ├── ...
│ │ └── index.tsx
│ ├── services
│ │ ├── ...
│ │ └── index.ts
│ ├── views
│ │ ├── assets
│ │ ├── common
│ │ ├── components
│ │ ├── layouts
│ │ └── pages
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
├── .env
├── ...
├── index.html
├── docker-compose.yml
├── package.json
├── postcss.config.json
├── tailwind.config.json
├── tsconfig.json
├── tsconfig.node.json
├── README.md
└── vite.config.ts
```
This was part of the developement of this Technical Test. **I hope you like it!** Thanks for this opportunity and sorry for delay.