Skip to content

Transform Figma designs into dynamic, pixel-perfect web pages with React. Modular, SCSS-enhanced UI with robust error handling. Dive in! ๐ŸŽจโš›๏ธ๐Ÿ’…๐Ÿ” #ReactUI #WebDevelopment

Notifications You must be signed in to change notification settings

Hamed-Hasan/Build-Lendo-Dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

15 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

Web Application Dashboard Mockup

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 ๐Ÿ‘ฅ

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.

About

Transform Figma designs into dynamic, pixel-perfect web pages with React. Modular, SCSS-enhanced UI with robust error handling. Dive in! ๐ŸŽจโš›๏ธ๐Ÿ’…๐Ÿ” #ReactUI #WebDevelopment

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published