Client-side Routing for a Simple Contact App with React-Router v6

📗 Table of Contents

• 📖 Overview
  • Project Objectives
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Overview

This repository showcases a basic contact app built upon the principles learned from the official React Router tutorial. Through this project, you'll experience:

• The advantage of managing contact app states using React-Router hooks as opposed to standard React hooks.
• An illustrative guide to client-side routing in React, tailored for a contact management scenario.
• Design techniques for intuitive user dashboards in a contact app.

To get a quick overview, don't miss the video summary highlighting the app's features and the benefits of using React-Router v6!

Project Objectives

• Simplicity and Usability: Develop an intuitive interface for easy contact management and navigation.
• Efficient State Management: Utilize React-Router hooks for smooth transitions and efficient data handling.
• Robust Client-Side Routing: Leverage React-Router v6 for client-side routing mechanisms tailored for contact apps.
• Responsive Design: Ensure cross-device compatibility and accessibility.
• User Dashboard: Offer a comprehensive dashboard for contact overview with search, sort, and filter capabilities.
• Contact CRUD Operations: Enable creating, reading, updating, and deleting contacts with seamless routing.
• Error Handling: Implement mechanisms for handling routing errors and guiding users appropriately.
• Feedback and Iteration: Continuously improve based on user feedback.

Installation

🛠 Built With

Tech Stack

• react
• npm
• Git
• GitHub
• Stylelint
• ESLint
• VSCode
• react router
• vite
• localforage
• match-sorter
• prop-types
• sort-by
• gh-pages

Key Features

• Client-side routing.

🚀 Live Demo

Live Demo Link

💻 Getting Started

• [Optional] Install git bash to your machine to enable you to clone this repo.
• install Visual Studio to be able to host a local live version.
• Install a browser to view the local live version.

To get a local copy up and running follow these simple example steps.

Setup

• Open your GitHub account the repository's link

Prerequisites

• Internet connection
• A github account

Install

• copy the repo's link and clone it by writing git clone https://github.com/fmanimashaun/bookstore-cms.git on your git bash terminal.
• npm install to install the dependencies.

Run tests

• You can check for errors by running linter tests found in the github flows.

Deployment

• run npm run start to run it locally.

Authors

👤 Engr. Animashaun Fisayo

• GitHub
• Twitter
• LinkedIn
• Website

🔭 Future Features

• add user authenitcation for private contact management.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

⭐️ Show your support

Give a ⭐️ if you like this project!

🙏 Acknowledgements

• React-router team

📝 License

This project is MIT licensed.