LearnitToys
Discover the Joy of Learning with LearnitToys!
At LearnitToys, we believe that education should be fun and engaging. Our carefully curated selection of educational toys is designed to ignite curiosity, foster creativity, and inspire a love for learning in children of all ages.
Explore our collection today and embark on a journey of endless discovery with LearnitToys- Where Learning Comes to Life!
Live Website Link:
Note:
If you can't see the data in the website, please try reloading for few times.
As it's deployed using vercel's free plan, it might not be available for all the time.
For example- I check it by visiting this link- https://learn-it-toys-server.vercel.app/toys and continue reloading until I get the data in the browser.
If data is visible, then try again from the website. It should work then.
Server Side Code
https://github.com/shamiul-anik/learn-it-toys-server
API Links
All Toys Details :
Single Toy Details :
https://learn-it-toys-server.vercel.app/toy/id
Features of this Project
- Full project is made with responsive design for both smartphone and PC.
- A Navbar with navigation options, profile picture when logged in and a login button. Active styles for different routes on the Navbar also added.
- Homepage with a Banner, Gallery, Latest Toys, Trending Toys, Testimonials, What Our Customers Say, Discount and Newsletter sections. Here Latest Toys, Trending Toys, Testimonials, What Our Customers Say, Discount and Newsletter are extra sections added as per the requirements.
- Lazy image loading feature implemented for better performance and user experience.
- Clicking on the View Details button will redirect the user to the '/toy/:id' route showing all the details of the toy with images. Unauthorized users will get an warning if they try to visit this page without login.
- An Error handling (404) page with error message and animated text and image added for error handling.
- A Blog page with a banner and answers to questions related to React also added.
- Dynamic title on the tab added which changes with the menu using custom hook.
- Used Vercel for server side deployment.
- When reloaded page not found error handling for different routes and live server.
- Toast alerts when update toy info, adding toy info, login and registration is successful. Also confirmation for deleting toy data also added.
- User's Name and Photo URL update functionality added when registering with email and password.
- PDF creation functionality added in Blog page.
- Show/Hide password feature added in Login and Registration page.
- Accept terms and conditions to continue with the registration process functionality added.
- User profile added with update functionality.
- Social login functionality added using Google.
- React lazy load added for better user experience and optimization.
- Contact and About page added as extra features.
- AOS animation added on different sections of Home page.
- Search functionality added on All Toys and My Toys page. Indexing is used in Toy Name and Seller Name for better search experience.
- Home page Sub-category section added with dynamic data loading on click from database.
Packages/Services/Font Used:
Serial No. |
Name |
Link |
1 |
React-pdf |
https://react-pdf.org/ |
2 |
Tailwind CSS |
https://tailwindcss.com/ |
3 |
daisyUI |
https://daisyui.com/ |
4 |
Flowbite |
https://flowbite.com/docs/getting-started/react/ |
5 |
React Icons |
https://react-icons.github.io/react-icons |
6 |
React Rating |
https://react-rating.onrender.com/ |
7 |
React Router |
https://reactrouter.com/en/main |
8 |
Firebase |
https://firebase.google.com |
9 |
Google Font |
https://fonts.google.com/specimen/Poppins |
10 |
Lottie React |
https://www.npmjs.com/package/lottie-react |
11 |
React Toastify |
https://www.npmjs.com/package/react-toastify |
12 |
React Lazy Load |
https://github.com/loktar00/react-lazy-load |
13 |
AOS |
https://www.npmjs.com/package/aos |
14 |
React Tabs |
https://www.npmjs.com/package/react-tabs |
15 |
SweetAlert2 |
https://sweetalert2.github.io/ |