DEV Community

Cover image for Mern App ( Node.js / React / Redux / Ant Design ) Crud & Auth
Salah Eddine Lalami
Salah Eddine Lalami

Posted on • Updated on

Mern App ( Node.js / React / Redux / Ant Design ) Crud & Auth

Starter Antd Admin (Crud & auth) App based on Mern Stack

App built for DigitalOcean MongoDB Hackathon

starter-antd-admin-crud-auth-mern-crud-auth

CRM Starter Mern Antd Admin App

I build Starter Crm App based on mern stack (Express.js / MongoDb / React / Redux / AntD) with generic crud and auth , admin management .

Live App Demo : https://antd-admin-yle2f.ondigitalocean.app
username : admin@demo.com
password : admin123

Github Repo : https://github.com/idurar/starter-antd-admin-crud-auth-mern

App Features :

Backend :

  • The backend is built with node.js , express.js Framework ,and MongoDb Database
  • Generic Crud Api (Create / Read / Update / Delete)
  • Admin (User) Management Api
  • Auth by Jwt json web token

Frontend :

  • The Frontend is built with React.js , Ant Design (Antd), and Redux , Redux-thunk.
  • Generic Crud Component (Module) (Create / Read / Update / Delete)
  • Admin (User) Management Module
  • Auth Component Login / Logout
  • Private Route and Public Route
  • Not Found Page
  • Beautiful UI Dashboard

Deployment :

Database : Digitalocean Managed MongoDb

Node.js App : Digitalocean App Platform

React.js App : Digitalocean JamStack Platform

Discussion (20)

Collapse
fazzfeed profile image
FazzFeed.com • Edited on

Hi Salah,
When I run this command line: npm start. It has an error like the attached image.

starter-crud-auth-api-express@1.0.0 start
node ./server.js

Assertion failed: You must provide either mongoUrl|clientPromise|client in options
E:\Study\NodeJS\starter-antd-admin-crud-auth-mern\backend\node_modules\connect-mongo\build\main\lib\MongoStore.js:119
throw new Error('Cannot init client. Please provide correct options');
^

Error: Cannot init client. Please provide correct options
at new MongoStore (E:\Study\NodeJS\starter-antd-admin-crud-auth-mern\backend\node_modules\connect-mongo\build\main\lib\MongoStore.js:119:19)
at Function.create (E:\Study\NodeJS\starter-antd-admin-crud-auth-mern\backend\node_modules\connect-mongo\build\main\lib\MongoStore.js:136:16)
at Object. (E:\Study\NodeJS\starter-antd-admin-crud-auth-mern\backend\app.js:35:23)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (E:\Study\NodeJS\starter-antd-admin-crud-auth-mern\backend\server.js:37:13)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint as runMain
at node:internal/main/run_main_module:17:47

Please help me to support.
Thank you.

Collapse
lalami profile image
Salah Eddine Lalami Author

1 ) just create MongoDB Atlas accout database url
2) change this file name .variables.env.tmp to .variables.env
3) open .variables.env and paste your MongoDB url here : DATABASE=your-mongodb-url

Collapse
zababurinph profile image
zababurinph

Hi Salah,
I'm a beginner in programming on JS, React, etc. Can you help me and explain, how can I start this project on my PC?
I have cloned the repository from GitHub, but when I use "npm start", I get a lot of mistakes. I understand, that I need to change some files, but I don't understand, which files and how.

Please help me to support.
Thank you.

Collapse
yossefmohamed profile image
YossefMohamed

Great work Salah!!

But unfortanlly the login credentials doesn't work.

Collapse
lalami profile image
Salah Eddine Lalami Author

Thanks Youcef,
Check now it work with any credentials, i fix the issue (I add new demo login controller )in routes/authApi.js

Collapse
yossefmohamed profile image
YossefMohamed

Nice UI salah and nice design 👍
But the only missing thing is the responsivety

Collapse
ngquoctrong profile image
Peter Nguyễn

Hi Salah,
Greate work,
but when i login to portal, it redirect me again to login page with Request error 401

Thread Thread
lalami profile image
Salah Eddine Lalami Author

issue is fixed , thanks for report , you can try now

Thread Thread
ngquoctrong profile image
Peter Nguyễn • Edited on

Thanks Salah,
It works great, nice design

Collapse
webdev710 profile image
webdev-710

Great! Salah
I tried to learn React(I am already vue lover, but React dominates job platforms) but it is not as easy to learn as Vue.

I will kickstart building React apps using your CRUD app.

Thanks

Collapse
lalami profile image
Salah Eddine Lalami Author

Thank you, don't forget please to star repo : github.com/idurar/starter-antd-adm...

Collapse
mitubarua profile image
Mitu Barua

Hi @salah Eddine Lalami Can you please help me running idurar/erp-crm ?
I have done everyhitng with the settings but unfortunately it ends up with localhost:3000/login BLANK Screen. Please guide me with this.

Collapse
abdulazeem4 profile image
Azeem

Hi Salah,
I'm new to MERN Stack and I want create/modify the data schema we have, for example I want to change the data value in clientSchema from company to customers. I tried to do that and then changed the data index in Customers.jsx and CustomerForm.jsx. When I try to submit the form, It says Required fields are not supplied. Can you please help me out with it?

Collapse
lufy3qvietnam profile image
Vu Duong

Great!!, I used this combo in every web hackathon.

Collapse
abdodeve profile image
Abdelhadi Habchi

Thank you ❤️

Collapse
ats1999 profile image
Rahul kumar

This is not responsive.

Collapse
lalami profile image
Salah Eddine Lalami Author

@ats1999 it will be included soon , keep watching on github for new features

Collapse
fazzfeed profile image
FazzFeed.com

Hi Team,
How to build & run project on local?

Collapse
esealli profile image
Ese

Great Work Salah

When i log in, it logs me out immediately

Collapse
lalami profile image
Salah Eddine Lalami Author

Hi Ece ,

thank you, issue is fixed , thanks for report , you can try now