Skip to content

This project is a Trello-like web application built using JavaScript and React.

Notifications You must be signed in to change notification settings

Nurtimax/my_trello

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Trello-like App

This project is a Trello-like web application built using JavaScript and React. It aims to replicate some functionalities of Trello, allowing users to manage tasks and organize them into boards and lists.

Features

  • Board Management: Create, update, and delete boards.
  • List Creation: Organize tasks within various lists under a board.
  • Task Management: Add, update, and delete tasks within lists.
  • Drag and Drop Functionality: Implement drag-and-drop features for easy task reordering.

Technologies and Skills

The following technologies and skills are required or beneficial for this project:

  • JavaScript: Essential for front-end development.
  • React: Utilizing React library for building user interfaces.
  • React Router DOM: For managing routing within the application.
  • Background Image Integration: Incorporating background images for aesthetic appeal and user experience enhancement.
  • HTML & CSS: Basic knowledge for structuring and styling the app.
  • State Management: Understanding state management in React for managing app data.
  • API Integration: Connecting with backend services or creating a mock API for storing board, list, and task data.

Setup Instructions

To set up the project locally, follow these steps:

  1. Clone the repository from GitHub.
  2. Install dependencies using npm install.
  3. Run the development server using npm start.
  4. Access the application in your web browser at http://localhost:3000.

Development Roadmap

Phase 1: Basic Implementation

  • Set up React project structure.
  • Implement basic board and list components.
  • Create mock data for tasks.
  • Enable basic task management functionalities.

Phase 2: Routing and Drag-and-Drop

  • Integrate React Router DOM for navigation between boards and lists.
  • Implement drag-and-drop functionalities for task reordering.

Phase 3: Styling and User Experience

  • Incorporate background images and enhance UI/UX design.
  • Ensure responsiveness for various screen sizes.
  • Fine-tune user interactions and animations.

Contribution

If you'd like to contribute to this project, please fork the repository, create a new branch, make your changes, and open a pull request.

Feel free to reach out for any questions or suggestions regarding the project.

Happy coding!