This project showcases a File Explorer & Editor developed using React, adhering to the principles of clean architecture. By employing a layered code structure, the application becomes more manageable and facilitates effective testing. Leveraging Redux Toolkit for state management enhances performance and simplifies implementation. This example serves as a valuable reference for structuring React applications in accordance with Clean Architecture principles, empowering developers to build robust and scalable software solutions.
- Create New Folder and File
- Monaco Editor Supported
- Download File
- Lexical Editor Supported
- Excalidraw Whiteboard Supported
- Download Folder
- Export File to PDF
- Export Folder to PDF
- Open Local File
- Open Local Folder
- ReactJS
- Redux Toolkit
- TypeScript
- Sass
- Ant Design
Clone the project
git clone https://github.com/jhasuraj01/filepad.git
Go to the project directory
cd filepad
Install dependencies
npm install
Start the server
npm run start
The directory structure of the project is organized according to the principles of clean architecture. The project is divided into four main layers:
This layer is responsible for rendering the user interface and handling user interactions. It consists of the presentation directory and its subdirectories.
This layer contains the business logic of the application. It consists of the domain directory and its subdirectories.
This layer provides the implementation details for the abstractions defined in the domain layer. It consists of the infrastructure directory and its subdirectories.
This layer provides the interfaces between the application and external systems. It consists of the adapters directory and its subdirectories.
![Mobile View Mobile View](https://private-user-images.githubusercontent.com/44930179/237165781-9c806994-18cf-4684-ac0e-c6928675e4ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgyMzUyNDQsIm5iZiI6MTcxODIzNDk0NCwicGF0aCI6Ii80NDkzMDE3OS8yMzcxNjU3ODEtOWM4MDY5OTQtMThjZi00Njg0LWFjMGUtYzY5Mjg2NzVlNGVkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEyVDIzMjkwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc3MjFjMDYyODAwNDA5NmYyNzQzNzVhNmY2YmQyY2U2Nzg4NTY3YTY1OTJlMmUzOTg0MDdiMjcxYWYyOWRlNDYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.osEF9WO5eeER2jYifyUz1zqNqdAA0iXk04Gtc_DfVRw)
- OpenAI ChatGPT
- Clean Architerture
- How to implement Clean Architecture in Node.js (and why it's important)
- Using Clean Architecture for Microservice APIs in Node.js with MongoDB and Express
- 4Dev React - Enquetes para Programadores
- Clean Architecture: Applying with React
This project is an example of how to structure a React application following the Clean Architecture principles. By separating the code into different layers, it becomes easier to maintain and test the application. The use of Redux Toolkit simplifies the implementation of state management and improves the performance of the application.