Welcome to the Twiga Soko Yetu Clone project! This is a simple React project where I aimed to practice my understanding of React fundamentals, including importing components, libraries, and styles. The project consists of a carousel with different background images and containers in each slide, showcasing the benefits of Soko Yetu..
- Reactjs with Vite
- React-Slick (Carousel Library)
- CSS
- Practice React fundamentals
- Learn how to import components, libraries, and styles in a React project
- Implement a carousel with dynamic content
To run this project locally on your machine, please follow these steps:
- Clone the repository to your local machine using the following command:
git clone https://github.com/Ciamuthama/Twiga-Foods.git
- Navigate to the project directory:
cd Twiga-Foods
- Install the dependencies by running the following command:
npm install
- Start the development server:
npm run dev
- Open your browser and visit
http://localhost:3000to see the application in action.
During the development of this project, I encountered a few challenges. The main challenge was to replicate the responsive background images used in the original Soko Yetu landing page. Initially, I attempted to import each image and store them in a component, using React hooks useState and useEffect along with windows.innerWidth to conditionally render the appropriate image based on the screen resolution. However, this approach caused CSS conflicts and issues.
To overcome this challenge, I decided to use the CSS background-image property for each slider and define their responsiveness using @media queries. This approach allowed me to achieve the desired results without compromising the stability of the CSS.
This project served as a valuable learning experience, helping me practice React concepts and gain familiarity with importing components, libraries, and styles in a React project. The final result is a functional Twiga Foods Soko Yetu Landing Page Clone that showcases the benefits of Soko Yetu in an interactive and engaging way.
Feel free to explore the code and make any modifications or improvements as needed. If you have any questions or feedback, please don't hesitate to reach out.
Happy coding! 😄