Skip to content

A collection of ReactJS projects showcasing different features and techniques in modern web development.

Notifications You must be signed in to change notification settings

areebaqamar021/react-and-Nest-JS-projects

Repository files navigation

React and NestJS Projects

This repository contains a collection of ReactJS and NestJS projects showcasing various features and functionalities. Below is a list of the projects and a brief description.

Table of Contents

React Projects

Advice App

Description: A simple app that fetches and displays random advice using an external API. It demonstrates basic API integration and state management in React.

Technologies: ReactJS, Axios, Advice Slip API

Features:

  • Fetches random advice from an external API
  • Displays advice in a user-friendly interface

COVID-19 Tracker

Description: An application to track COVID-19 statistics globally and by country using a public API. It provides data visualization using charts and graphs.

Technologies: ReactJS, Axios, Chart.js, COVID-19 API

Features:

  • Global and country-specific COVID-19 statistics
  • Data visualization with charts and graphs
  • Real-time data updates

E-commerce App

Description: A fully functional e-commerce application with Firebase integration for authentication and Firestore for data storage. It includes features like product listing, cart management, and order processing.

Technologies: ReactJS, Redux, Firebase Authentication, Firestore, Material-UI

Features:

  • User authentication (sign-up, login)
  • Product listing and details view
  • Cart management and checkout process

Firebase Authentication

Description: A project demonstrating authentication functionalities using Firebase. It includes user registration, login, and logout features.

Technologies: ReactJS, Firebase Authentication, Material-UI

Features:

  • User registration and login
  • Secure authentication with Firebase
  • User-friendly interface with Material-UI

Job Board

Description: A job board application to post and search for jobs. It uses ReactJS, Redux for state management, and Tailwind CSS for styling.

Technologies: ReactJS, Redux, Tailwind CSS

Features:

  • Job posting and searching functionalities
  • Filter and search options
  • Responsive design with Tailwind CSS

Recruitment Metrics Tracker

Description: A web application designed to track and analyze recruitment metrics such as time to hire, source of hire, gender ratio, offer acceptance rate, and candidate withdrawal rate. It provides detailed analytics and visualizations.

Technologies: ReactJS, RandomUser API, Recharts, CSS Flexbox/Grid

Features:

  • Track key recruitment metrics
  • Data visualization and analytics
  • Responsive Design

Scientific Calculator

Description: A React-based scientific calculator with basic and advanced mathematical operations. It showcases the use of React state and event handling.

Technologies: ReactJS, CSS

Features:

  • Basic and advanced mathematical operations
  • User-friendly interface
  • Responsive design

Weather App

Description: A weather application that fetches current weather data from an external API based on user input. It provides weather details and forecasts.

Technologies: ReactJS, Axios, OpenWeatherMap API

Features:

  • Fetches current weather data based on user input
  • Displays weather details and forecasts
  • User-friendly interface

NestJS Projects

CRUD Operations

Description: This project demonstrates basic CRUD (Create, Read, Update, Delete) operations using NestJS. It covers the creation of RESTful APIs to manage data with a MySQL database.

Technologies: NestJS, TypeORM, MySQL, Postman

Features:

  • Basic CRUD functionality for managing entities.
  • MySQL database integration.
  • Postman for testing the endpoints.

Relations

Description: A NestJS project that focuses on managing entity relations such as One-to-One, One-to-Many, and Many-to-Many relationships in a MySQL database using TypeORM.

Technologies: NestJS, TypeORM, MySQL, Postman

Features:

  • Demonstrates various relational database models.
  • Efficient data management and querying with relations.
  • Postman tests for validating the relations.

Technologies

  • ReactJS
  • NestJS
  • Redux
  • Firebase
  • Material-UI
  • REST APIs
  • TypeORM
  • MySQL
  • Tailwind CSS
  • React Router DOM

Installation

  1. Clone the repository:

    git clone https://github.com/areebaqamar021/react-projects.git
    cd react-projects
  2. Navigate to the project directory and install dependencies:

    cd project-name
    npm install
    

Usage

  1. Start the development server:

    npm start
  2. Open your browser and navigate to http://localhost:3000 to see the project in action.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes.