https://home-oasis.netlify.app
Oasis is an E-commerce React web application tailored to transform your living space into a productive workspace and vice versa. Seamlessly blending functionality with style, Oasis leverages Firebase for authentication, Redux for state management, and Stripe for secure payment processing. With Vite ensuring efficient bundling and SASS providing sleek aesthetics, Oasis offers an intuitive user experience. Deployed on Netlify, Oasis guarantees seamless accessibility, allowing users to explore our curated selection of furniture, decor, and accessories from anywhere, anytime
This is the Lighthouse Google report showcasing Performance 🚀, Accessibility ♿️, Best practices ✅, and SEO 🔍.
| Technology | Description | Link |
|---|---|---|
| Firebase | Development platform | Firebase |
| Flutterwave React V3 | React library for Flutterwave integration | Flutterwave React V3 |
| GSAP | Animation library | GSAP |
| jQuery | JavaScript library | jQuery |
| React | JavaScript library for building UIs | React |
| React DOM | React rendering for the DOM | React DOM |
| React Icons | SVG icon library for React | React Icons |
| React Redux | State management library for React | React Redux |
| React Router | Routing library for React | React Router |
| React Router DOM | React Router for the DOM | React Router DOM |
| React Slick | Carousel component for React | React Slick |
| Redux | State container for JavaScript apps | Redux |
| Redux Logger | Logger middleware for Redux | Redux Logger |
| Redux Persist | State persistence for Redux | Redux Persist |
| Reselect | Selector library for Redux | Reselect |
| Slick Carousel | Carousel component for websites | Slick Carousel |
| Types React | TypeScript types for React | Types React |
| Types React DOM | TypeScript types for React DOM | Types React DOM |
| Vite | Frontend build tool | Vite |
| @vitejs/plugin-react | Vite plugin for React | Vite (Plugin React) |
| ESLint | JavaScript linter | ESLint |
| eslint-plugin-react | ESLint plugin for React | ESLint Plugin React |
| eslint-plugin-react-hooks | ESLint plugin for React Hooks | ESLint Plugin React Hooks |
| eslint-plugin-react-refresh | ESLint plugin for React Refresh | ESLint Plugin React Refresh |
| Sass | CSS extension language | Sass |
| Vite | Frontend build tool | Vite |
| Stripe | Payment processing platform | Stripe |
| Netlify | Web hosting and automation platform | Netlify |
Users can clone the code and run npm install to install the dependencies
npm install
Afterwards users can run the command npm run build which will run the Vite build process which will bundle the React source code
npm run build
Afterwards users can run the command npm run dev which will executes the vite command, which starts the development server provided by Vite
and allows users to run the code on their local host
npm run dev
This sequence ensures that your client-side code is built before starting the server.
Package.json dependencies ⚙️
Have fun!
Homepage
Shopping
Login
Footer
GIF
Showcasing Homepage, adding a item to the cart and scroll button
This project is licensed under MIT
N/A
N/A
If you have any questions about this project, please contact me directly at [email protected]. Feel free to view more of my projects at https://github.com/Makeredundant.