Frello is an interactive and user-friendly project management application inspired by Trello. Built with React, it allows users to manage boards, lists, and tasks seamlessly with real-time updates. The frontend is styled with SCSS, providing a modern and responsive design.
Check out the live version of the project here.
- Board Management: Create, edit, and delete boards to organize your projects.
- Task Management: Add, edit, delete, and reorder tasks within lists.
- Lists: Organize tasks into lists for better management and tracking.
- Real-time Collaboration: Experience real-time updates, allowing multiple users to collaborate efficiently.
- Responsive Design: The interface is styled using SCSS for a responsive and dynamic user experience.
- React for building the interactive UI components.
- SCSS for customized and responsive styling.
- Socket.IO for real-time updates and collaboration.
- Redux for state management.
- Axios for API requests.
- Vite for fast development.
- Date pickers:
react-datepicker,react-day-picker. - Styled-components for component-level styling.
- React-beautiful-dnd for drag-and-drop functionality.
- Node.js installed on your machine.
- A package manager like npm or yarn.
- Clone the repository:
git clone https://github.com/natiapa/frello.git
- Navigate to the frontend directory:
cd frello-frontend - Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:3030.
- Create boards to represent different projects.
- Add lists and tasks to each board.
- Edit, reorder, or delete tasks as needed.
- Collaborate with others in real-time.
src/components- Contains all React components used in the app.src/styles- Contains SCSS files for styling the app.src/services- Includes services for API calls and real-time updates.
This project was developed collaboratively by:
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh.
- @vitejs/plugin-react-swc uses SWC for Fast Refresh.