Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhasuraj01/filepad
File Explorer & Editor built with React, following the principles of clean architecture.
https://github.com/jhasuraj01/filepad
clean-architecture clean-code react redux text-editor vscode
Last synced: 5 days ago
JSON representation
File Explorer & Editor built with React, following the principles of clean architecture.
- Host: GitHub
- URL: https://github.com/jhasuraj01/filepad
- Owner: jhasuraj01
- License: mit
- Created: 2020-07-24T15:29:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-13T20:34:40.000Z (5 months ago)
- Last Synced: 2024-09-15T11:31:46.557Z (5 months ago)
- Topics: clean-architecture, clean-code, react, redux, text-editor, vscode
- Language: TypeScript
- Homepage: https://jhasuraj.com/filepad
- Size: 2.75 MB
- Stars: 15
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React FilePad: File Explorer & Editor built with Clean Architecture Principles
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.
## Features
- [x] Create New Folder and File
- [x] Monaco Editor Supported
- [x] Download File
- [ ] Lexical Editor Supported
- [ ] Excalidraw Whiteboard Supported
- [ ] Download Folder
- [ ] Export File to PDF
- [ ] Export Folder to PDF
- [ ] Open Local File
- [ ] Open Local Folder
## Authors
- [@jhasuraj01](https://www.github.com/jhasuraj01)
## Tech Stack
- ReactJS
- Redux Toolkit
- TypeScript
- Sass
- Ant Design
## Environment Setup
- Download and install [Git](https://git-scm.com/downloads)
- Download and install [Node.js](https://nodejs.org/en/download/)
## Run Locally
Clone the project
```bash
git clone https://github.com/jhasuraj01/filepad.git
```
Go to the project directory
```bash
cd filepad
```
Install dependencies
```bash
npm install
```
Start the server
```bash
npm run start
```
## Folder Structure
The directory structure of the project is organized according to the principles of clean architecture. The project is divided into four main layers:
#### Presentation Layer
This layer is responsible for rendering the user interface and handling user interactions. It consists of the presentation directory and its subdirectories.
#### Domain Layer
This layer contains the business logic of the application. It consists of the domain directory and its subdirectories.
#### Infrastructure Layer
This layer provides the implementation details for the abstractions defined in the domain layer. It consists of the infrastructure directory and its subdirectories.
#### Adapters Layer
This layer provides the interfaces between the application and external systems. It consists of the adapters directory and its subdirectories.
## Screenshots
#### FilePad Editor
#### FilePad File Explorer
#### Context Menu - Create New File
##### Folder Context Menu
##### File Context Menu
##### FilePad Editor: Mobile View
## References
- [OpenAI ChatGPT](https://openai.com/blog/chatgpt)
- [Clean Architerture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html)
- [How to implement Clean Architecture in Node.js (and why it's important)](https://youtu.be/VmY22KuRDbk)
- [Using Clean Architecture for Microservice APIs in Node.js with MongoDB and Express](https://youtu.be/CnailTcJV_U)
- [4Dev React - Enquetes para Programadores](https://github.com/rmanguinho/clean-react)
- [Clean Architecture: Applying with React](https://dev.to/rubemfsv/clean-architecture-applying-with-react-40h6)
## Appendix
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.