Welcome to TheMoonDevs startup assignment! 🚀 This project aims to enhance readability and maintainability by refactoring a medium-sized page with overloaded UI and functionality.
I chose the second assignment option: Fragment the UI into selective components. This decision aimed to improve maintainability and readability.
-
🔍 Improved Readability: Breaking down the UI into components makes it easier to comprehend and manage.
-
🧩 Modular Code: Each component now serves a specific purpose, leading to a more modular and organized codebase.
-
🌐 Scalability: The fragmented structure allows for easy scalability, making it simpler to add or modify features.
-
💡 Maintenance: Future maintenance becomes more straightforward, as each component handles a specific aspect of the application.
-
👁️ Clear Separation of Concerns: Components are responsible for discrete functionality, promoting a clear separation of concerns.
Check out the before
folder for the original code snippet and the after
folder for the improved, fragmented version.
📦 TheMoonDevs-Startup-Assignment
┣ 📂 before
┃ ┗ 📜 Page.tsx
┣ 📂 after
┃ ┗ 📜 Page.tsx
┃ ┣ 📂 components
┃ ┃ ┣ 📜 Button.tsx
┃ ┃ ┣ 📜 BurnStatsContainer.tsx
┃ ┃ ┣ 📜 ChairSelectorModal.tsx
┃ ┃ ┣ 📜 TransactionTable.js
┃ ┃ ┗ 📜 AppToast.tsx
┃ ┃ ┗ 📜 Header.tsx
This project tackles the challenge of refactoring a cluttered UI and consolidating functionality into manageable components. The result is a sleek, modularized codebase that's easier to read and maintain.
- Clone the repository.
- Explore the
before
andafter
folders to witness the transformation. - Dive into the code to see how components were selectively crafted for better readability.