A modern React-based skincare product showcase designed to help users explore, filter, and compare skincare products through a clean, responsive, and user-friendly interface. The project focuses on delivering an intuitive browsing experience with optimized performance and a mobile-first design.
Live Demo: https://skinsphere-hng.vercel.app/ GitHub Repository: https://github.com/thistechbabe1/skinsphere
- 🔍 Browse a collection of skincare products
- 🏷️ Filter products by category
- ⚖️ Compare multiple products side-by-side
- 📱 Fully responsive design for desktop, tablet, and mobile devices
- 🖼️ Optimized image loading for improved performance
- ♻️ Reusable React components for maintainable code
- 🎨 Clean and modern user interface
- React
- JavaScript (ES6+)
- HTML5
- CSS3
- Git
- GitHub
- Vite
Make sure you have the following installed:
- Node.js (v18 or later)
- npm
Clone the repository:
git clone https://github.com/thistechbabe1/skinsphere.gitNavigate into the project directory:
cd skinsphereInstall dependencies:
npm installStart the development server:
npm run devThe application will be available at:
http://localhost:5173
src/
├── assets/
├── components/
├── pages/
├── data/
├── styles/
├── App.jsx
└── main.jsx
This project was built to strengthen practical frontend development skills, including:
- Building responsive user interfaces with React
- Creating reusable component-based architectures
- Managing application state
- Implementing filtering and comparison functionality
- Optimizing images and frontend performance
- Writing clean and maintainable code
Contributions are welcome!
To contribute:
- Fork the repository
- Create a feature branch
git checkout -b feature/new-feature- Commit your changes
git commit -m "Add new feature"- Push your branch
git push origin feature/new-feature- Open a Pull Request
This project is licensed under the MIT License.
Sharon Lawal
- Portfolio: https://sharonlawal.vercel.app
- GitHub: https://github.com/thistechbabe1
- LinkedIn: https://linkedin.com/in/sharon-lawal