https://github.com/davicho-dev/tinkin-code-challenge-front
Tinkin Code Challenge
https://github.com/davicho-dev/tinkin-code-challenge-front
atomic-design axios cypress eslint gsap gsap-animation husky jest prettier react react-icons react-redux react-tooltip redux-toolkit rtk-query sass tailwindcss typescript uuid vite
Last synced: 3 months ago
JSON representation
Tinkin Code Challenge
- Host: GitHub
- URL: https://github.com/davicho-dev/tinkin-code-challenge-front
- Owner: Davicho-Dev
- Created: 2025-04-01T01:17:21.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-04-09T04:21:37.000Z (12 months ago)
- Last Synced: 2025-04-13T08:12:36.783Z (12 months ago)
- Topics: atomic-design, axios, cypress, eslint, gsap, gsap-animation, husky, jest, prettier, react, react-icons, react-redux, react-tooltip, redux-toolkit, rtk-query, sass, tailwindcss, typescript, uuid, vite
- Language: TypeScript
- Homepage: https://tinkin.davicho.dev
- Size: 66.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tinkin - Code Challenge
## Installation and Running the Project
### Prerequisites
Ensure you have the following installed on your machine:
1. **Bun**: A fast JavaScript package manager. To install `bun`, run (macOS/Linux):
```bash
curl -fsSL https://bun.sh/install | bash
```
1. Recommended Node.js version: **v18.x or above** (only required as necessary for Bun compatibility).
### Steps to Install and Run the Project
1. **Clone the Repository**:
```bash
git clone git@github.com:Davicho-Dev/Tinkin-Code-Challenge.git
cd Tinkin-Code-Challenge
```
1. **Install Dependencies** with Bun:
```bash
bun install
```
This command will install all required dependencies based on the `package.json`.
1. **Run the Development Server**:
```bash
bun run dev
```
The development server will start. You can access the application locally at:
```
http://localhost:3000
```
## Deployment in the Cloud
The project has been deployed on **tinkin.davicho.dev**.
To view the application in production:
1. Open a browser and navigate to:
```
https://tinkin.davicho.dev
```
1. Log in using the credentials provided to you via email:
- **Username**: DavichoDev.
- **Password**: Provided in the email.
## Libraries and Tools Used
### Core Libraries
- **React** (v19.0.0): A library for building user interfaces.
- **React DOM** (v19.0.0): For rendering React components.
- **TypeScript** (v5.7.2): Provides static typing for JavaScript.
- **Redux Toolkit** (v2.6.1): Simplified and efficient state management.
### Development Tools
- **Vite** (v6.2.0): Lightning-fast development server and build tool.
- **ESLint** (v9.21.0): For linting JavaScript/TypeScript to enforce coding standards.
- **Prettier** (v3.5.3): A formatter to ensure consistent code style.
- **Husky** (v9.1.7) and **Lint-Staged** (v15.5.0): Git hooks to automate pre-commit tasks.
### Styling
- **TailwindCSS**: A utility-first CSS framework for rapid UI development.
- **PostCSS** (v8.5.3) and **Autoprefixer** (v10.4.21): Tools for CSS processing and adding browser compatibility.
- **Sass** (v1.86.1): CSS preprocessor for extended styling options.
### Testing
- **Jest** (v29.7.0): Extensive framework for unit and integration testing.
- **Cypress** (v14.2.1): Provides functional and end-to-end (E2E) testing.
### Additional Libraries
- **Axios** (v1.8.4): To handle HTTP requests conveniently.
- **UUID** (v11.1.0): For generating unique identifiers.
- **React Router DOM** (v7.4.1): For handling routing in the application.
- **React Tooltip** (v5.28.0): For adding customizable tooltips.
- **React Hot Toast** (v2.5.2): Lightweight toast notifications.
- **GSAP** (v3.12.7) and **@gsap/react** (v2.1.2): Rich animation library for user interface elements.
## Testing the Project
### Unit Testing with Jest
Run the Jest test suite for unit tests:
```bash
bun unit
```
### End-to-End (E2E) Testing with Cypress
To run Cypress and perform E2E tests:
```bash
bun e2e
```
Tests are preconfigured to ensure they're compatible with the application.
## Code Quality: Linting & Formatting
### Check for Linting Errors
To check for coding style issues using **ESLint**:
```bash
bun lint
```
**Husky** and **Lint-Staged** will automatically run these checks before committing code to ensure quality.
## Notes
- Always keep your `.env` file updated with the necessary local and production keys.
- After installing any new dependencies, be sure to re-run:
```bash
bun install
```
- For production builds, ensure you're using optimized configurations (e.g., `.env.production`).