frankly034 / redirect-app

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

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
• Concepts Employed
• Built with
• Mock Designs
• Required Installations
• Installation
• License
• Contact
• Acknowledgements

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.

• Login page.

• Dashboard, account and not found pages.

Required Installations

• Node/NPM

Installation

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

Clone the Repository

your@pc:~$ git clone [email protected]: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

• 🇳🇬 Lewis Ugege - [email protected] | Github Account | Twitter | Linkedin | Youtube

Acknowledgements

• URL REDIRECTION – ATTACK AND DEFENSE and God Almighty.