Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naufaldi/pokemon-bobobox
Test Case for Frontend Dev at Bobobox
https://github.com/naufaldi/pokemon-bobobox
jest nextjs react react-testing-library tailwind tailwindcss typescript
Last synced: 25 days ago
JSON representation
Test Case for Frontend Dev at Bobobox
- Host: GitHub
- URL: https://github.com/naufaldi/pokemon-bobobox
- Owner: naufaldi
- Created: 2022-01-28T11:30:57.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-01T04:18:26.000Z (about 3 years ago)
- Last Synced: 2024-11-14T17:51:32.442Z (3 months ago)
- Topics: jest, nextjs, react, react-testing-library, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://pokemon-bobobox.vercel.app/
- Size: 2.3 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Bobobox Frontend
Project for Bobobox Frontend Development
## Tech Stack
- `NextJS`, a React Framework
- `TailwindCSS`, a CSS Framework
- `React-Hooks`, a React Hooks Library
- `Recoil`, a React State Management Library
- `Jest`, a Testing Framework
- `React Testing Library`, a Testing Library for React
- `Prettier`, a Code Formatter
- `Eslint`, a Code Linter
- `Typescript`, a TypeScript Compiler## Demo
[Demo Website](https://pokemon-bobobox.vercel.app/)
## Run Locally
Clone the project
```bash
git clone https://github.com/naufaldi/bobobox-test
```Go to the project directory
```bash
cd bobobox-test
```Install dependencies
```bash
npm install
```Start the server
```bash
npm run dev
```## Folder Structure
```
├── dist # Compiled files
├── public # Public files
├── src # Source files
│ ├── components # all of component files
| | ├── common # component related to common like button / alert
│ | ├── homepage # component base on usage in homepage pages
│ | ├── layout # component base on layout like header, and footer,
│ | └── pokemon # component base on usage in pokemon detail pages
│ ├── lib # test and helper
| | ├── __test__ # test files
| | └── helpers # helper functions
│ ├── pages # pages files
│ ├── recoil # Global State
│ ├── styles # Style file
│ └─── types # Type data
└── README.md
```## Preview
![Dekstop](/screenshot/dekstop.png)
![Mobile](/screenshot/mobile.png)
![Saved Bookmark](/screenshot/dekstop-bookmark.png)
![Detail Pokemon](/screenshot/dekstop-detail.png)