Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/henokrb/mern-crud-pwa
A Progressive WEB App (PWA) MERN Stack CRUD app
https://github.com/henokrb/mern-crud-pwa
crud crud-application expressjs mern-stack mongodb mongoose node node-js nodejs progressive-web-app react reactjs
Last synced: about 4 hours ago
JSON representation
A Progressive WEB App (PWA) MERN Stack CRUD app
- Host: GitHub
- URL: https://github.com/henokrb/mern-crud-pwa
- Owner: henokrb
- Created: 2022-05-20T13:20:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-03T00:36:35.000Z (over 1 year ago)
- Last Synced: 2024-11-03T10:18:42.718Z (17 days ago)
- Topics: crud, crud-application, expressjs, mern-stack, mongodb, mongoose, node, node-js, nodejs, progressive-web-app, react, reactjs
- Homepage: https://mern-crud-pwa.netlify.app
- Size: 418 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🤘 MERN Stack CRUD Progressive Web Application (PWA)
MERN Stack CRUD **Progressive Web Application (PWA)** built with
- **Frontend** React v17+, RRDv6+, npx create-react-app my-app --template cra-template-pwa
- **Backend** Node.js, Express.js, Mongoose ODM
- **Database** MongoDB**You can import the JSON File named 'Cruds' to your MongoDB. You will find it in the Server Folder**
[Download](https://github.com/jackbalageru/MERN-CRUD) | [Developer Portfolio](https://henok.us)
## Progressive Web App (PWA)
**Why PWA?**
- Works offline
- Works on slower connections
- Installable on Mobile Phones, Tabs and Desktop
- Cross Platform (work on all browsers/systems)
- Discoverable (on the search engines)
- Responsive
- Fast and lightweight**Developed with ❤️ by [Henok R. Bedassa](https://henok.us/). If you love my project please star ⭐️ my repo!**
## Table View
You will find all the CRUD operations here. Create, Read, Update and Delete
[![image](https://atlanticplc.com/wp-content/uploads/mern-crud/CRUD_Table_View.png)](https://henok.us/)
## CRUD Form
Here you can create new data
[![image](https://atlanticplc.com/wp-content/uploads/mern-crud/CRUD_Create.png)](https://henok.us/)
## Grid View
This is an optional Grid View
- Divided to 4 Cols
- Clickabel Phone and Web URL[![image](https://atlanticplc.com/wp-content/uploads/mern-crud/CRUD_Grid_View.png)](https://henok.us/)
## List View
This is an optional List View
- Clickabel Phone and Web URL
[![image](https://atlanticplc.com/wp-content/uploads/mern-crud/CRUD_List_View.png)](https://henok.us/)
## Details View
Details view by Id
- Clickabel Phone and Web URL
[![image](https://atlanticplc.com/wp-content/uploads/mern-crud/CRUD_Details_Page.png)](https://henok.us/)
## Installation
1. Clone repository
```shell
git clone https://github.com/jackbalageru/MERN-CRUD-PWAnpm n.git
```## Install Client (React Files)
2. Get in the client folder
```shell
cd client
```3. Install dependencies via npm or yarn
```shell
npm i
```4. Start Client
```shell
npm start
```## Install Server (Node Files)
2. Get in the server folder
```shell
cd server
```3. Install dependencies via npm or yarn
```shell
npm i
```4. Start Server
```shell
nodemon server
```## Install Database (JSON File)
2. Get in the server folder
```shell
cd server
```3. Import the following file to your MongoDB
```shell
Cruds
```## Support
For any additional information please refer to [Henok R. Bedassa](https://henok.us).
**Thank you**