Skip to content

It is part of a tutorial series: `Elegant react router redirect with URL redirection defense`

Notifications You must be signed in to change notification settings

frankly034/redirect-app

Repository files navigation

React Redirect

This is a React app, bootstrapped using Vite. It is part of a tutorial series: Elegant react router redirect with URL redirection defense (See playlist) to illustrate how to design and implement an elegant and low maintenance react redirection using the higher order component (HOC) and provider pattern.

Table of Contents

App Features

  • A simple react application set up with vite and react router dom with a simple layout.
  • Implementing redirection with a higher order component.
  • Passing authentication state to child compnents using provider pattern (react context).
  • Memorize and redirect users to intending page after login. Like in the case of a link shared via email to a specific path requiring login.

Concepts Employed

  • This app demonstrates the use of React concepts like:
    • Routing and templating with react route dom v6
    • App redirection with higher order component (HOC) and provider patterns.
    • Custom hooks
    • React contexts
    • Higher order component (HOC)

Built with

  • HTML5
  • CSS3
  • JavaScript
  • React (Scaffolded with vite)

Mock Designs

See mock design guides for the app below;

  • Email available at http://localhost:8000/email.html with CTA button directed to /account, however login is required to access this route. After login, user is redirected to /account, as earlier intended instead of the default /dashboard. Screenshot 2023-05-08 at 00 18 53

  • Login page. Screenshot 2023-05-08 at 00 19 37

  • Dashboard, account and not found pages. Screenshot 2023-05-08 at 00 20 22 Screenshot 2023-05-08 at 00 20 48

Required Installations

  • Node/NPM

Installation

Once you have installed the required packages, proceed with the following steps

Clone the Repository

your@pc:~$ git clone git@github.com:frankly034/redirect-app.git

Move to the downloaded folder

your@pc:~$ cd redirect-app

Install all packages

your@pc:~$ npm install

Open the app

your@pc:~$ npm run dev

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Acknowledgements