Giter VIP home page Giter VIP logo

assignment_'s Introduction

MERN Stack Assignment

Description

- This React application is built using [vite](https://vitejs.dev).

- It Uses [Tailwind CSS](https://tailwindcss.com/).

- The application uses node.js as the backend.

- Database it uses MongoDB.

Pre-requisites

- [git](https://git-scm.com/) - v2.13 or greater

- [NodeJs](https://nodejs.org/en/) -v16 or greater

- [npm](https://www.npmjs.com/) -v6 or greater

Running in dev environment

  1. git clone https://github.com/Sahil-Sayyad/Assignment_.git
  2. cd Assignment_
  3. npm install
  4. set .env file MongoDB URL
  5. npm start -- this for backend server
  6. cd frontend
  7. npm install
  8. npm run dev -- this for frontend react server
  9. first type URL in the browser or postman 'http://localhost:8000/api/fetch' then you will able to see data.

.env file

This file contains mongodb environment variable that you can configure.

API Endpoints

    - GET /api/fetch : fetch and store transactions.
    - GET /api/transactions?selectedMonth=March&searchQuery=&currentPage=1&perPage=10 : Get a list of transactions with filter and sorting.
    - GET /api/statistics?month=March : Get summary statistics about transactions with filter and sorting.
    - GET /api/bar-chart?month=March : Get data for bar chart transactions with filter and sorting.
    - GET /api/pie-chart?month=March : Get data for Pie chart transactions with filter and sorting.
    - GET /api/combine-data : fetches the data from all the 4 APIs mentioned above, combines the response and sends a final response of the combined JSON.

    Note: 
    - Here you don't need to request all API's these API's managed by frontend with react,
    - Just here you need to hit the "backend-server/api/fetch" for the first time e.g. (http://localhost:8000/api/fetch ) for fetching data and storing it in db.
    - You can also test all the mentioned API endpoints with Postman or other tools.
    - last API endpoint "api/combine-data" you need to test with the Postman or with other tools.  

Demo Video

   - To see the frontend part you need to 'cd frontend' and then start 'npm run dev' to get the URL e.g. (http://localhost:5173/).
screen-capture.webm

assignment_'s People

Contributors

sahil-sayyad avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.