Techfly Client Side

screenshot of Techfly Client Side
express
react
tailwind
daisyui
firebase

Techfly Client Side

TechFly is a manufacturing website of computer and laptop parts with payment system for users.

Overview

The Techfly website is a single-page-application that serves as a PC parts manufacturing website. It allows users to sign up, login, and make purchases via card payment. The website also features different dashboard routes for both admin and users, allowing them to manage their profiles, add or delete products, and update order statuses. The website is responsive for all screen sizes.

Features

  • Firebase authentication: Users can sign up, login, and use Google login for authentication.
  • Card payment: Users can securely pay for the products they want to purchase via card payment.
  • User and admin dashboards: Separate dashboard routes for users and admins for managing profiles, products, orders, and more.
  • Product management: Admins can add or delete products, and users can add reviews to the website.
  • Order management: Admins can see the products purchased by any users, update order statuses, and delete unpaid orders.
  • Profile management: Users and admins can view and update their profiles on the dashboard page.

Installation

To install the Techfly website, follow these steps:

  1. Clone the client-side repository from here and the backend-side repository from here.
  2. Install the required dependencies by running npm install in both the client-side and backend-side directories.
  3. Create a Firebase project and configure it with your credentials.
  4. Create a MongoDB Atlas account and configure your database.
  5. Replace the Firebase and MongoDB credentials in the code with your own.
  6. Run npm start in both the client-side and backend-side directories to start the application.
  7. Access the website live-link at https://techfly-eef56.web.app/.

Summary

The Techfly website is a single-page-application that allows users to sign up, login, and make purchases for PC parts. With features such as Firebase authentication, card payment integration, and separate dashboards for users and admins, the website provides a convenient and secure experience. Users can manage their profiles and add product reviews, while admins have additional privileges such as adding/deleting products and updating order statuses. The website is responsive and easy to install using the provided installation guide.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

firebase
Firebase

Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.

dashboard
Dashboard

A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.