Git Product home page Git Product logo

moscuet / lending-loft Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 24.52 MB

Lending Loft's front-end application streamlines library book borrowing. Developed with TypeScript, React, Redux, and React-Bootstrap, it's supported by a Node.js/Express backend and MongoDB database

Home Page: https://zealous-galileo-0290aa.netlify.app/

JavaScript 0.30% HTML 1.00% CSS 10.11% TypeScript 88.58%
raectjs react-bootstrap redux typescript formik-form jwt-auth redux-saga redux-thunk yup-validation

lending-loft's Introduction


๐ŸŸข Live App
Netlify | JWT Authentication

Lending Loft

The front-end application of a full-stack library project, this application enhances the book borrowing experience with an interface built on TypeScript, React, Redux, and React-Bootstrap. It is integrated with a Node.js and Express backend and features secure JWT authentication, all supported by a MongoDB database. Check it out at Lending Loft


๐Ÿ”ฅ Features

  • User Engagement: Users can browse books, add them to a cart, place borrow orders, and check the status of borrowed items.
  • User Profile Management: Registered users have the ability to update their personal information post-login.
  • Admin Capabilities: Admins can manage the entire book lifecycle, from adding new books and authors to handling borrowing statuses, and even removing users, books, or authors from the system.

๐Ÿ›  Tech Stack

  • Developed using TypeScript, React, Redux, React-Bootstrap, Formik-Form, and Yup for form validation.
  • Advanced state management with Redux, enhanced by Redux-thunk and Redux-saga for asynchronous actions and side effects.
  • Navigation and routing handled by React-router.
  • User authentication and security facilitated by JWT (JSON Web Token).
  • Code formatting and consistency ensured with Prettier.
  • Enforced coding standards and quality using ESLint for linting.
  • Pre-commit hooks implemented with Husky and lint-staged to maintain code integrity.
  • Backend: Integrated with Node.js and Express, MongoDBand, and uses JWT for secure authentication

๐Ÿ“ธ Feature Highlights

User Dashboard: A snapshot of the user interface, displaying how users can manage their book borrowings and account information.

Admin Panel: Illustrates the administrative capabilities, such as managing the book catalog, user activities, and more.

Book Browsing and Borrowing: A view of the book selection and borrowing interface, highlighting ease of use.

Responsive Design: Demonstrates the appโ€™s responsiveness across different devices.

๐ŸŒ Deployment

Deploy effortlessly on the Netlify Platform to achieve the best performance and scalability. The app is pre-configured for Netlify, enabling continuous deployment straight from the repository.

๐Ÿ“– User Journey

For regular users, the app provides a personalized dashboard to manage their book borrowings and account information. For administrators, it offers comprehensive control over the library's catalog and user activity, making management tasks straightforward and efficient.


๐Ÿš€ Local Setup

Clone the project and start it locally with: bash

yarn 
yarn start
Visit http://localhost:3000 to interact with the app.


Future development:

  • password reset
  • Social Login / Federated authentication: Google, github
  • display user photo in user account
  • replace delete button in cart with delete icon
  • feature: email confirmation of the order

Instruction for outdated package update:

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.

If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/mostafizurrahman/Desktop/code/library-app/Lending-Loft/node_modules/webpack is outside your project directory. For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls webpack in your project folder. This will tell you which other package (apart from the expected react-scripts) installed webpack.

lending-loft's People

Contributors

moscuet avatar umersharif 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.