Circunetics-Research

Overview

The Real-Time D3.js Visualization with User Authentication project aims to combine the power of the MERN stack with D3.js, enabling users to interact with visualizations in real-time while maintaining the security and privacy of their data through user authentication.

Frontend Verecel Deployed Link :

Steps to deploy REACT app:

• Login your vercel account
• then follow some CLI comment on the terminal itself
  • vercel
  • then the terminal asks some questions about setup and directory
  • vercel --prod
  • It will give me a production link that is deployed link

Deploy link: https://circuneties.vercel.app/

Backend Render Deployed Link:

Steps to deploy SERVER:

• create a new repo and add backend code
• import this repo in the render Dashboard
• set the environment variables that you have in .env file
• after some time it gives me live link

Deploy link: https://circunetics.onrender.com/

Tech Stack :

A) Frontend :

React (JSX Syntax), Chakra-ui Library for Styling & Modal, axios for handling asynchrous request, react-router-dom for routing or Navigate from one page to another, Standard react components, React-hooks, chakra-icons, react-icons, d3-visualization, token-based-authentication, docker, docker-images, docker-containers, bar-chart, jest-dom & jest-tests.

B) Backend :

Node.js, Express.js, mongodb (NoSQL), mongoose for connect database to server, cors for handling the cors error, relationships between collections, BSON and Bsondump.

Some instructions to run locally :

Installation

Clone the Repository from Github. Then do the following steps:

# For Frontend

    npm install

    npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

    npm i @chakra-ui/icons

    npm install react-icons --save

   npm i axios react-router-dom@6 d3

// To run react-app
    npm run start
    (Or)
    npm start

# For Backend
    npm init -y

    npm i express mongoose cors bcrypt dotenv jsonwebtoken nodemon

   // To run server
    npm run server

# For Docker
   docker run --rm --name ecommerce-container -e CHOKIDAR_USEPOLLING=true -d -
p 3000:3000 -v $(pwd):/app ecommerce-image    

For Unit Testing of comoponent used JEST Library

To Run Test Cases use CLI Commend

   npm install --save-dev jest @testing-library/react @testing-library/jest-dom

   npm test

Some HTTP (Hyper Text Transfer Protocol) Status Code Which I used :

404 ---> Not Found/failure

200 ---> OK/Success/get/put

201 ---> Created/post

204 ----> Delete/reject

Some Project Screenshots :

A) For Computer Screen:

B) For Mobile/Tablet Screen :