Sunset Challenge - Frontend

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.

🚀 Technologies

• 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

📋 Features

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

🛠️ Getting Started

Prerequisites

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

Running Locally

1. Clone the repository:

git clone https://github.com/brunownk/sunset-challenge-web.git
cd 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 at http://localhost:5172

Available Scripts

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

📦 Project Structure

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

🔗 API Integration

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

API Routes

• 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

🎨 Design System

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

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

📱 Responsive Design

The application is fully responsive and works on:

• Mobile devices
• Tablets
• Desktop computers

🔒 Security

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

🌐 Production URL

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

📝 License

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

🔄 Navigation

• Back to Top
• Root Documentation
• API Documentation