Skip to content

Justinianus2001/trello-web

BranchesTags

Repository files navigation

📋 Trello Clone - Frontend

A modern, responsive Trello clone frontend built with React, Redux Toolkit, and Material-UI. Features drag-and-drop functionality, real-time updates, and a beautiful user interface.

✨ Features

  • 🎨 Modern UI/UX

    • Material-UI components
    • Dark/Light mode toggle
    • Responsive design for all devices
    • Smooth animations and transitions

  • 🔐 Authentication

    • User registration and login
    • Email verification
    • Protected routes
    • Persistent authentication with JWT

  • 📊 Board Management

    • Create and manage multiple boards
    • Board customization (title, description, background)
    • Board member management
    • Starred and recent boards

  • 🎯 Drag & Drop

    • Intuitive card dragging between columns
    • Column reordering
    • Smooth drag-and-drop experience
    • Built with DnD Kit

  • 📝 Card Management

    • Create, edit, and delete cards
    • Rich text descriptions with Markdown
    • Card activities and comments
    • File attachments
    • Card cover images

  • 👥 Collaboration

    • Invite users to boards
    • Real-time updates via WebSocket
    • User notifications
    • Board member avatars

  • 🔍 Search & Navigation

    • Quick board search
    • Autocomplete suggestions
    • Workspace navigation
    • Breadcrumb navigation

  • ⚙️ User Settings

    • Profile management
    • Avatar upload
    • Security settings
    • Account preferences

🛠️ Tech Stack

  • Framework: React 18
  • Build Tool: Vite
  • State Management: Redux Toolkit
  • UI Library: Material-UI (MUI)
  • Styling: Emotion (CSS-in-JS)
  • Drag & Drop: @dnd-kit
  • HTTP Client: Axios
  • WebSocket: Socket.io-client
  • Routing: React Router v6
  • Form Handling: React Hook Form
  • Markdown Editor: React Markdown Editor Lite
  • Date Handling: date-fns / dayjs

📁 Project Structure

trello-web/
├── public/              # Static assets
├── src/
│   ├── apis/           # API integration
│   │   └── index.js
│   ├── assets/         # Images, icons, etc.
│   │   ├── 404/
│   │   └── auth/
│   ├── components/     # Reusable components
│   │   ├── AppBar/
│   │   │   ├── AppBar.jsx
│   │   │   ├── Menus/
│   │   │   ├── Notifications/
│   │   │   └── SearchBoards/
│   │   ├── Form/
│   │   ├── Loading/
│   │   ├── Modal/
│   │   │   └── ActiveCard/
│   │   └── ModeSelect/
│   ├── customHooks/    # Custom React hooks
│   │   └── useDebounceFn.js
│   ├── customLibraries/ # Custom library configurations
│   │   └── DndKitSensors.js
│   ├── pages/          # Page components
│   │   ├── 404/
│   │   ├── Auth/
│   │   │   ├── Auth.jsx
│   │   │   ├── LoginForm.jsx
│   │   │   ├── RegisterForm.jsx
│   │   │   └── AccountVerification.jsx
│   │   ├── Boards/
│   │   │   ├── index.jsx
│   │   │   ├── _id.jsx
│   │   │   ├── create.jsx
│   │   │   ├── BoardBar/
│   │   │   └── BoardContent/
│   │   ├── Settings/
│   │   │   ├── Settings.jsx
│   │   │   ├── AccountTab.jsx
│   │   │   └── SecurityTab.jsx
│   │   └── Users/
│   ├── redux/          # Redux store and slices
│   │   ├── store.js
│   │   ├── activeBoard/
│   │   ├── activeCard/
│   │   ├── notifications/
│   │   └── user/
│   ├── utils/          # Utility functions
│   │   ├── authorizeAxios.js
│   │   ├── constants.js
│   │   ├── formatters.js
│   │   ├── sorts.js
│   │   └── validators.js
│   ├── App.jsx         # Main App component
│   ├── main.jsx        # Application entry point
│   ├── socketClient.js # WebSocket client setup
│   └── theme.js        # MUI theme configuration
├── .eslintrc.cjs
├── index.html
├── jsconfig.json
├── package.json
├── vercel.json
└── vite.config.js

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • Running backend API (see trello-api)

Installation

  1. Clone the repository

    git clone https://github.com/Justinianus2001/trello-web.git
cd trello-web

  2. Install dependencies

    npm install

  3. Set up environment variables

    Create a .env file in the root directory:

    VITE_API_URL=http://localhost:8017/v1
VITE_SOCKET_URL=http://localhost:8017

  4. Start the development server

    npm run dev

    The application will be available at http://localhost:5173

Production Build

npm run build
npm run preview

🎮 Usage

Getting Started

  1. Register an Account

    • Navigate to the registration page
    • Fill in your details
    • Verify your email address

  2. Create a Board

    • Click "Create new board"
    • Add a title and description
    • Customize the background

  3. Add Columns

    • Click "Add another list"
    • Name your column
    • Start adding cards

  4. Manage Cards

    • Click "Add a card" in any column
    • Drag cards between columns
    • Click on a card to view details

  5. Collaborate

    • Invite team members to your board
    • See real-time updates
    • Receive notifications

🎨 Customization

Theme

The application supports dark and light modes. Customize the theme in src/theme.js:

// Example: Change primary color
primary: {
  main: '#1976d2', // Your custom color
}

Constants

Update application constants in src/utils/constants.js:

  • Board limits
  • Card limits
  • File upload limits
  • And more...

📱 Responsive Design

The application is fully responsive and works seamlessly on:

  • 📱 Mobile devices (320px and up)
  • 📱 Tablets (768px and up)
  • 💻 Desktops (1024px and up)
  • 🖥️ Large screens (1920px and up)

🔌 API Integration

All API calls are centralized in src/apis/index.js. The application uses Axios with interceptors for:

  • Automatic token injection
  • Request/response logging
  • Error handling
  • Token refresh

🔄 State Management

Redux Toolkit is used for global state management:

  • User Slice: Authentication and user data
  • Active Board Slice: Current board state
  • Active Card Slice: Selected card details
  • Notifications Slice: Real-time notifications

🌐 WebSocket Integration

Real-time features powered by Socket.io:

  • Live board updates
  • User invitations
  • Notifications
  • Collaborative editing

🧪 Testing

npm run test

📝 Code Style

This project uses ESLint for code linting:

npm run lint

🚀 Deployment

Vercel (Recommended)

  1. Install Vercel CLI

    npm i -g vercel

  2. Deploy

    vercel

The vercel.json configuration is already included.

Other Platforms

  • Netlify: Drag and drop the dist folder
  • GitHub Pages: Use gh-pages package
  • AWS S3: Deploy static build files

🔧 Configuration Files

  • vite.config.js: Vite configuration
  • jsconfig.json: JavaScript configuration for imports
  • .eslintrc.cjs: ESLint rules
  • vercel.json: Vercel deployment settings

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Coding Guidelines

  • Follow the existing code style
  • Write meaningful commit messages
  • Add comments for complex logic
  • Test your changes thoroughly

🗺️ Roadmap

  • Add board templates
  • Implement labels/tags
  • Add due dates and reminders
  • Calendar view
  • Advanced search and filters
  • Mobile app (React Native)
  • Offline support

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Hoang Le Ngoc - @Justinianus2001

🙏 Acknowledgments

📧 Contact

For questions or support, please open an issue or contact: lengochoang681@gmail.com

Backend Repository: trello-api

Live Demo: https://trello-web-amber-omega.vercel.app

About

A Frontend Web Client built with React.js to complete a full-stack Trello-style project.

trello-web-amber-omega.vercel.app

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages