Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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)