learn-it-toys-client Tailwind Templates

Learn It Toys Client

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 fun!

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!

Google Firebase: https://learn-it-toys.web.app/

Netlify: https://learn-it-toys.netlify.app/

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

All Toys Details :

Vercel : https://learn-it-toys-server.vercel.app/toys

Railway : https://learn-it-toys-server.up.railway.app/toys

Cyclic : https://pear-whale-kit.cyclic.app/toys

Single Toy Details :

https://learn-it-toys-server.vercel.app/toy/id

Example: https://learn-it-toys-server.vercel.app/toy/64690c365b00781f59754e61

Features of this Project

  1. Full project is made with responsive design for both smartphone and PC.
  2. A Navbar with navigation options, profile picture when logged in and a login button. Active styles for different routes on the Navbar also added.
  3. 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.
  4. Lazy image loading feature implemented for better performance and user experience.
  5. 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.
  6. An Error handling (404) page with error message and animated text and image added for error handling.
  7. A Blog page with a banner and answers to questions related to React also added.
  8. Dynamic title on the tab added which changes with the menu using custom hook.
  9. Used Vercel for server side deployment.
  10. When reloaded page not found error handling for different routes and live server.
  11. Toast alerts when update toy info, adding toy info, login and registration is successful. Also confirmation for deleting toy data also added.
  12. User's Name and Photo URL update functionality added when registering with email and password.
  13. PDF creation functionality added in Blog page.
  14. Show/Hide password feature added in Login and Registration page.
  15. Accept terms and conditions to continue with the registration process functionality added.
  16. User profile added with update functionality.
  17. Social login functionality added using Google.
  18. React lazy load added for better user experience and optimization.
  19. Contact and About page added as extra features.
  20. AOS animation added on different sections of Home page.
  21. Search functionality added on All Toys and My Toys page. Indexing is used in Toy Name and Seller Name for better search experience.
  22. 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/

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes