Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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**