Kasa's React App

Have you ever done a web application with React?

I didn't either...
This is my first webapp made with React.

Project made during an OpenClassrooms bootcamp.
Learning path: Développeur Web

"Raw React" project.
No React library allowed.

Implemented features

(Despite the fact that villains "educators" tried to make me build a crappy app by forbidding me to use libs... Boo that!)

• Rescue mechanisms based on the Damerau-Levenshtein distance (and on the number of consecutive characters in common between the given string and the expected string) to redirect to the right page or suggest a corresponding page possibility for a given URL (typed with typos or incomplete)

  • Incomplete URLs
    • Redirection
      • https://oc-kasa-lyart.vercel.app/about
    • Suggestion
      • https://oc-kasa-lyart.vercel.app/abou
      • https://oc-kasa-lyart.vercel.app/housing
  • Typos
    • Suggestion
      • https://oc-kasa-lyart.vercel.app/bauo-tsu
    • Redirection
      • https://oc-kasa-lyart.vercel.app/about-su
      • https://oc-kasa-lyart.vercel.app/abuot-su
      • https://oc-kasa-lyart.vercel.app/abuot-us
      • https://oc-kasa-lyart.vercel.app/bauot-su

• Dynamic database re-fetching on page first-load/change + local database caching

• Loading placeholders ("First-load" placeholders, "Retrying to load" placeholders, "Failed to load" placeholders, user local cache-based placeholders)

• Dark/Light theme

• i18n

  • Infers the language according to the web browser settings
  • Keeps track of the most recent language choice
  • Dynamically generates internationalized routes (/fr/, /en-us/, etc)
  • Dynamically redirects to the correct route corresponding to the language choice made either by the user or by the language inference
  • Extensible codebase (type-safe dictionnaries, dynamic API endpoint choice, typed Vocabulary Accessor, automated generators...)

• Animated accordions

  • Possibility to have only one accordion's item opened at a time (just pass several items to your <Accordion> component)
  • Possibility to bypass this previous behavior (using multiple mono-item accordions)
    • https://oc-kasa-lyart.vercel.app/housing-sheets/c67ab8a7
    • https://oc-kasa-lyart.vercel.app/about-us

• Animated images slider + infinite loop

  • https://oc-kasa-lyart.vercel.app/housing-sheets/0979876d
  • Also has a swiping feature (only on mobiles/tablets).

Resources

• Figma Mockups
• The best articles you would ever read about "Raw React"/the React's runtime

Demo

https://oc-kasa-lyart.vercel.app/

How to run this project locally

• $ yarn start
• (or) $ npm start

---

This GitHub repository is not part of the OPENCLASSROOMS website or OPENCLASSROOMS SAS.
Additionally, this GitHub repository is NOT endorsed by OPENCLASSROOMS in any way.
OPENCLASSROOMS is a trademark of OPENCLASSROOMS, SAS.