https://github.com/ashishkohad27/cointab_frontend
Project frontend build with ReactJs and backend build with NodeJs, express , mongodb
https://github.com/ashishkohad27/cointab_frontend
css express html javascript mongodb nodejs react sql
Last synced: 3 months ago
JSON representation
Project frontend build with ReactJs and backend build with NodeJs, express , mongodb
- Host: GitHub
- URL: https://github.com/ashishkohad27/cointab_frontend
- Owner: AshishKohad27
- Created: 2023-02-17T16:03:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-19T12:20:35.000Z (over 3 years ago)
- Last Synced: 2025-02-04T12:56:28.702Z (over 1 year ago)
- Topics: css, express, html, javascript, mongodb, nodejs, react, sql
- Language: JavaScript
- Homepage: https://coin-tab-front-end.vercel.app/
- Size: 417 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## GitHub Backend Link - https://github.com/AshishKohad27/coinTab_BackEnd
## Deployed Link
1. Backend Link - https://tough-lamb-tutu.cyclic.app/
2. Frontend Link - https://coin-tab-front-end.vercel.app/
# coinTab_FrontEnd
## Build with
## Functionalities
- Home Page
- User Details Page
## Project as
- ### **Frontend**
- ### **Backend**
# 🧑🏻 **Ashish Kohad**
- Github:[@Ashish Kohad](https://github.com/AshishKohad27)
- Linkedin: [Ashish Kohad](https://www.linkedin.com/in/ashish-kohad27/)
- Email: (kohadashish27@gmial.com)
# ** Tech Stacks used **
- Javascript
- HTML
- CSS
- React
- Redux
- NextJs
- ExpressJs
- MongoDB
External libraries used
- Chakra UI
- React Router DOM
- React Redux
- Redux Thunk
- Axios
# FontEnd Side
# Home Page
# Delete User Functionality
# User Details Page
# Filter functionality
# Pagination
# Backend Side
## Build REST API's with
- NodeJs
- ExpressJs
## Data Stored in MongoDB
## Steps of starting Backend
1. Run `npm run start` on terminal
2. You will get `URL` like this `http://localhost:7879` server running on port number `7879`
## Methods
# 1. Get Data
### getUrl :- `http://localhost:7879/data/filter`
## Data can able to filter , sorted, paginated with this methods
- We can use filter, sort, pagination, search together
```javascript
http://localhost:7879/data/filter?gender=&page=1&limit=60&name=f&ageL=80&ageR=70&country=Ireland&sortName=desc
```
### list of filter
1. Filter by Age
- range ageL : above that limit
- range ageR : below that limit
- both should use together
```javascript
getUrl?ageR=50&ageL=70;
```
2. Filter by Country
```javascript
getUrl?country=Ireland
```
3. Filter by Gender
gender= male/female/""
```javascript
getUrl?gender=male
```
### Sort
1. Sort Data base on Nama
- Ascending order (asc)
- Descending order (desc)
```javascript
getUrl?sortName=desc
```
### Pagination
1. page (1 by default)
2. limit (10 by default)
- Prev Button
- Next Button
- Land any Page directly by clicking on particular page Number
```javascript
getUrl?page=1&limit=10
```
### Search Functionality
- Search any user by typing character in query
```javascript
getUrl?name="as"
```
# 2. Add Data
- Adding data done with this api
```
https://randomuser.me/
```
- Bulk Data added in the data base in the range of 50 to 100 every time data added it give diff. data length in the range of 50 to 100.
# 3. Delete Data