UI/UX Lendo Project - React Web Page Implementation 🌐

Dive into a seamless implementation of design-to-web conversion with our UI/UX Take-home Project. This repository houses a React application that breathes life into a static Figma design, prioritizing a pixel-perfect layout, modular code structure, and dynamic user interactions.

Live Demo 🎮

Visit the live demo of the project to see it in action:

👉 Lendo Dashboard Live

Technologies 🛠️

This project is built with a robust stack of modern technologies designed for performance, scalability, and developer experience.

• React.js ⚛️: The core of our application, providing a reactive and component-based approach to building user interfaces.
• SCSS 💎: Advanced styling with SCSS allows for cleaner, more maintainable CSS with features like variables, nesting, and mixins.
• HTML5 📄: Semantic HTML markup ensures accessibility and SEO-friendliness of the web application.
• JavaScript (ES6+) 📜: Modern JavaScript syntax for cleaner code and enhanced functionality.
• ESLint 🔍: Keeps the code in check for consistency and to avoid syntactic pitfalls.
• npm 🧶: For managing all the dependencies and running build scripts.

Features ✨

• Pixel-Perfect Design Conversion 🎨: Transforms Figma designs into a fully functional web page that matches the mockup exactly.
• React Framework ⚛️: Built using the powerful and efficient React.js library.
• SCSS Styling 💅: Leveraged the SCSS framework for advanced styling capabilities.
• Modular Code 🧩: Ensures maintainability and scalability with well-organized, modular code.
• Basic Error Reporting 🔍: Includes basic error handling to improve user experience and debugging.

Installation and Setup 🛠️

To get this project up and running on your local machine, follow these steps:

Cloning the Repository

Clone the repository to your local machine using:

git clone https://github.com/Hamed-Hasan/Build-Lendo-Dashboard
cd Build-Lendo-Dashboard

Installing Dependencies

Install all the necessary dependencies using npm:

npm install

Running the Application

Start the application locally:

npm start

The application will launch on http://localhost:5173/ in your default web browser.

Usage 📖

Once the application is running, you will be able to interact with the UI as per the Figma design. The web page is now fully interactive and styled according to the SCSS framework.

Contributing 🤝

We welcome contributions to this project. Please read the CONTRIBUTING.md file for details on our code of conduct and the process for submitting pull requests to us.

Authors 👥

• Hamed Hasan - Portfolio

License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments 🎉

• Hat tip to anyone whose code was used
• Inspiration
• etc.