bloowatch-frontend-assignment

This repository contains the frontend assignment for the Bloowatch project. It is a private project used for development purposes.

Prerequisites

Make sure you have the following software installed on your machine before starting:

Node.js (version 12 or higher) npm (Node Package Manager) Installation Clone this repository to your local machine. git clone https://github.com/UmarEhsan/searchAndBookMarkingApp.git

Navigate to the project directory: cd searchAndBookMarkingApp

Install the project dependencies by running the following command:

To set the environment

Open your project's root directory.
  • Create a new file in the root directory and name it .env. Note that the file name starts with a dot.
  • Open the .env file in a text editor.
  • Add the following line to the .env file:
  • API_URL: 'https://api.github.com/search/repositories'

npm install

Usage The following npm scripts are available for development and building the project:

dev: Start the development server.

npm run dev build: Build the project for production.

npm run build lint: Run ESLint to check for code quality and adherence to coding standards.

npm run lint preview: Preview the production build locally.

npm run preview Dependencies The project utilizes the following dependencies:

  • @emotion/react: CSS-in-JS library for styling React components.
  • @emotion/styled: Emotion's styled component utility.
  • @mui/icons-material: Material-UI icons package.
  • @mui/material: Material-UI component library.
  • react: JavaScript library for building user interfaces.>
  • react-dom: Entry point to the DOM and server renderers for React.
  • react-router-dom: React bindings for the React Router library.

Development Dependencies

The project has the following development dependencies:

  • @types/react: TypeScript type definitions for React.
  • @types/react-dom: TypeScript type definitions for React DOM.
  • @vitejs/plugin-react: Vite plugin for React development.
  • @types/node: is a package that provides TypeScript type definitions for the Node.js runtime environment,
    enabling accurate type checking and improved development experience when working with Node.js APIs.
  • eslint: Pluggable JavaScript linter for code quality and style consistency.
  • eslint-plugin-react: ESLint plugin for React-specific linting rules.
  • eslint-plugin-react-hooks: ESLint plugin for enforcing React Hooks rules.
  • eslint-plugin-react-refresh: ESLint plugin for React Refresh integration.
  • vite: Fast and opinionated web dev build tool.