Thanos E-shop

Client Code : Link (Private Reposotory)

Server Code : Link (Private Reposotory)

Live Site Links:

Public Link (Public)

Demo Link (Demo)

Project Overview:

Thanos E-shop is an e-commerce platform for a freelancing project, which is a online gaming currency, subscription and gift card eshop. It is built using cutting-edge technologies like React.js, Node.js, and Firebase. This project incorporates various libraries and tools such as Axios, Firebase Realtime Database, Firebase Auth, Express.js, and more. The website features responsive design, seamless user experience, and interactive elements to enhance customer engagement.

Technologies Used:

• ➡️ Frontend:

  • React.js: The whole frontend of the site is built with React.js.
  • Material-UI: Some of the components used material UI.
  • Chart.js: This package is used as the analytical visualizer in admin dashboard.
  • Axios: used in fetch related issues.
  • React Router: Used for the routing related issues.

• ➡️ Backend:

  • Node.js: It has a small contribution in this project through nodemailer intigration.
  • Express.js: It has a small contribution in this project through nodemailer intigration.
  • Firebase Realtime Database: Used as the main database.
  • Firebase Authentication: Used as this sites auth service.

• ➡️ Other Tools:

  • Moment.js: Used in various time related issues.
  • SweetAlert2: Used in various modal related work.
  • Swiper: Used for the website banners and review cards.
  • Node Mailer: Node Mailer is used for sending mail to the admin about new order.

Challenges Faced and Solutions:

✅ Challenge 1: Integrating Firebase Services

Problem: Integrating Firebase services like Realtime Database and Authentication posed challenges due to complex configuration and asynchronous nature of Firebase operations.

Solution: Thorough research and documentation reading helped in understanding Firebase integration better. Proper error handling and async/await patterns were implemented to manage asynchronous operations effectively. Even realtime database rules are also implemented.

✅ Challenge 2: Ensuring Responsive Design

Problem: Ensuring the website's responsiveness across various devices and screen sizes required careful design considerations and testing.

Solution: Utilizing responsive design principles and testing the website on different devices and browsers ensured a seamless user experience. Media queries and flexible layout techniques were employed to achieve responsiveness.

✅ Challenge 3: Optimizing Performance

Problem: Large datasets and complex UI components impacted the website's performance, leading to slow loading times.

Solution: Performance optimization techniques such as lazy loading, code splitting, and image optimization were implemented. Web Vitals were continuously monitored, and optimizations were made based on the gathered data.

---

Note: The above challenges and solutions are representative examples and may not reflect the actual challenges faced during the development process. I Have tried my best to overcome various challenges, ensuring the successful implementation of Thanos E-shop.

For more detailed information on the project setup, configuration, and usage, please refer to the respective client and server code repositories provided in the links above.