Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gustavewpm/oc-kasa
React webapp made during an OpenClassrooms bootcamp. "Raw React" project (React libs disallowed).
https://github.com/gustavewpm/oc-kasa
damerau-levenshtein fuzzy-matching html5 i18n openclassrooms openclassrooms-frontend react-hooks reactjs responsive sass sass-mixins typesafe typesafe-i18n typescript vanilla-react vite vitejs vitejs-react
Last synced: 3 months ago
JSON representation
React webapp made during an OpenClassrooms bootcamp. "Raw React" project (React libs disallowed).
- Host: GitHub
- URL: https://github.com/gustavewpm/oc-kasa
- Owner: gustaveWPM
- License: mit
- Archived: true
- Created: 2023-04-03T07:10:06.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-02T04:18:06.000Z (10 months ago)
- Last Synced: 2024-09-26T00:24:01.052Z (3 months ago)
- Topics: damerau-levenshtein, fuzzy-matching, html5, i18n, openclassrooms, openclassrooms-frontend, react-hooks, reactjs, responsive, sass, sass-mixins, typesafe, typesafe-i18n, typescript, vanilla-react, vite, vitejs, vitejs-react
- Language: TypeScript
- Homepage: https://oc-kasa-lyart.vercel.app
- Size: 10.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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_](https://openclassrooms.com/fr/paths/717-developpeur-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](https://oc-kasa-lyart.vercel.app/about)
- Suggestion
- [https://oc-kasa-lyart.vercel.app/abou](https://oc-kasa-lyart.vercel.app/abou)
- [https://oc-kasa-lyart.vercel.app/housing](https://oc-kasa-lyart.vercel.app/housing)
- Typos
- Suggestion
- [https://oc-kasa-lyart.vercel.app/bauo-tsu](https://oc-kasa-lyart.vercel.app/bauo-tsu)
- Redirection
- [https://oc-kasa-lyart.vercel.app/about-su](https://oc-kasa-lyart.vercel.app/about-su)
- [https://oc-kasa-lyart.vercel.app/abuot-su](https://oc-kasa-lyart.vercel.app/abuot-su)
- [https://oc-kasa-lyart.vercel.app/abuot-us](https://oc-kasa-lyart.vercel.app/abuot-us)
- [https://oc-kasa-lyart.vercel.app/bauot-su](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 `` 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/housing-sheets/c67ab8a7)
- [https://oc-kasa-lyart.vercel.app/about-us](https://oc-kasa-lyart.vercel.app/about-us)
- Animated images slider + infinite loop
- [https://oc-kasa-lyart.vercel.app/housing-sheets/0979876d](https://oc-kasa-lyart.vercel.app/housing-sheets/0979876d)
- Also has a swiping feature (only on mobiles/tablets).
### Resources
- [Figma Mockups](https://www.figma.com/file/bAnXDNqRKCRRP8mY2gcb5p/UI-Design-Kasa-FR?node-id=3%3A0)
- [The best articles you would ever read about "Raw React"/the React's runtime](https://www.developerway.com)
#### Demo
[https://oc-kasa-lyart.vercel.app/](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.