https://github.com/rhw-repo/mern-post-app
In development: Full stack with JavaScript, React.js, Node.js, Express.js, MongoDB. JWT Authentication, CRUD & validation, filtering and database. Responsive CSS. TanStack Table. Current sprint: prepare for testing, refactor auth to SSO, re-testing & deployment.
https://github.com/rhw-repo/mern-post-app
css3 cssmodules-react express-validator expressjs html javascript jwt-authentification mern-stack-development mongo-db mongo-db-atlas mongoose-schema node-js postman-api react-hooks react-libraries react-router-dom react-select reactjs styled-components tanstack-table
Last synced: about 2 months ago
JSON representation
In development: Full stack with JavaScript, React.js, Node.js, Express.js, MongoDB. JWT Authentication, CRUD & validation, filtering and database. Responsive CSS. TanStack Table. Current sprint: prepare for testing, refactor auth to SSO, re-testing & deployment.
- Host: GitHub
- URL: https://github.com/rhw-repo/mern-post-app
- Owner: rhw-repo
- Created: 2023-06-09T13:20:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-17T14:07:17.000Z (11 months ago)
- Last Synced: 2025-01-29T10:22:21.177Z (11 months ago)
- Topics: css3, cssmodules-react, express-validator, expressjs, html, javascript, jwt-authentification, mern-stack-development, mongo-db, mongo-db-atlas, mongoose-schema, node-js, postman-api, react-hooks, react-libraries, react-router-dom, react-select, reactjs, styled-components, tanstack-table
- Language: JavaScript
- Homepage:
- Size: 932 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Demo App**
Update: See the subsequent live MVP app running [here](https://frontend-production-d277.up.railway.app). The code for that is in a separate private repo.
This mern-post-app repo contains early experiments using React.js running in Vite in a MERN stack app, with explanatory comments: concepts for an app designed to help users store and manage online marketing documents.
# **Technologies**
- React.js (in Vite) & React ecosystem library components
- originally Create React App, later migrated to Vite in a separate branch
- Node.js
- MongoDB
- Mongoose
- Express
- Testing requests: Postman API Platform
- Formatting: ESLint & Prettier
- Accessibility testing: WAVE, NVDA screen reader
- Original design files: Figma
From these early experiments, the project was taken forward to create a custom dashboard style app featuring custom filtering for a marketing team in the financial trading sector (in private repo). This early project allowed for testing of concepts:
- React hooks/custom hooks, context
- react-dom-router
- Tanstack Table (Javascript v7 version, "react-table")
- connecting library components from different libraries to "play nicely together"
- custom styling for library components, responsive design
- accesibility (aria, aria-live, minimum font-sizing & touchpads, contrast, keyboard support)
- migrating frontend from create-react-app to vite
- signup, login / logout (simple JSON Web Tokens in development phase)
- protected API routes = after succesful login, user accesses only their own set of documents
- CRUD functionality for their documents
- dotenv module and .env file for sensitive data
## **TODOs: all completed in the subsequent project running [here](https://frontend-production-d277.up.railway.app).**
### **Globally**
1) Add frontend and backend input sanitization (validator.js, DOM Purify & express-validator).
2) Self-host fonts using woff & woff2 files.
3) Accessibility and performance audit.
### **Auth**
1) Server side session based authentication to replace current development phase JWT email & password system.
### **Documentation**
1) Review development phase comments to remove redundant comments.
### **Earlier concepts**
Earlier concepts and frontend designs [here](https://github.com/rhw-repo/content_simple).