Giter Club home page Giter Club logo

hamed-hasan / build-lendo-dashboard Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 98 KB

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

Home Page: https://lendo-dashboard.netlify.app

JavaScript 42.61% HTML 1.58% CSS 7.66% SCSS 48.15%
creativecoding designtocode figmatoreact techinnovation codemodularity errorhandlingpro frontendwizardry javascriptjunkie modernwebapps pixelperfectdesign

build-lendo-dashboard's Introduction

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.

build-lendo-dashboard's People

Contributors

hamed-hasan avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.