Repository files navigation

Frontend for Sunset's technical assessment. React 18 with modern UI libraries and color customization features.

This is the frontend application for the Sunset Challenge, a todo list application with color customization features. This project was developed as part of a full-stack developer assessment for Sunset.

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: React Query
• Form Handling: React Hook Form with Zod validation
• UI Components:
  • Headless UI (Transition)
  • Radix UI (Dialog, Dropdown Menu, Icons)
  • Ark UI (Pagination)
• Routing: React Router DOM
• HTTP Client: Axios
• Date Handling: date-fns
• Color Picker: react-color
• Notifications: react-hot-toast
• Loading States: react-loading-skeleton
• Carousel: Swiper

• User authentication
• Todo list management
• Color customization for lists
• Task management within lists
• Responsive design
• Loading states and skeletons
• Toast notifications
• Form validation

• Node.js (v16 or higher)
• Yarn package manager

1. Clone the repository:

git clone https://github.com/brunownk/sunset-challenge-web.gitcd sunset-challenge-web

2. Copy the environment file:

cp .env.example .env

3. Install dependencies:

yarn install

4. Start the development server:

yarn dev

The application will be available athttp://localhost:5172

• yarn dev - Start development server
• yarn build - Build for production
• yarn lint - Run ESLint
• yarn preview - Preview production build

src/├── app/           # Application core├── assets/        # Static assets├── Router/        # Application routes├── view/          # Page components├── index.css      # Global styles├── main.tsx       # Application entry point└── App.tsx        # Root component

This frontend application integrates with the Sunset Challenge API. Make sure to have the API running and properly configured in your environment variables.

• Authentication

  • /auth/login - User login
  • /auth/register - User registration
  • /auth/refresh - Token refresh
  • /auth/logout - User logout

• Lists

  • /lists - List management
  • /lists/:id - Specific list operations

• Tasks

  • /tasks - Task management
  • /tasks/:id - Specific task operations

The application uses a custom design system built with Tailwind CSS, featuring:

• Custom color palette
• Responsive layouts
• Consistent spacing
• Typography system
• Component variants

The application is fully responsive and works on:

• Mobile devices
• Tablets
• Desktop computers

• Environment variables for sensitive data
• Secure API communication
• Input validation
• Protected routes
• Token-based authentication
• CORS configuration

The application is available at:https://sunset-challenge-web.vercel.app

This project is licensed under the MIT License - see theLICENSE file for details.

• Back to Top
• Root Documentation
• API Documentation