Giter Club home page Giter Club logo

rhw-repo / mern-post-app Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 832 KB

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.

JavaScript 82.43% HTML 0.82% CSS 16.75%
css3 mongoose-schema react-hooks react-router-dom reactjs tanstack-table react-select cssmodules-react express-validator expressjs

mern-post-app's Introduction

Demo App

Experiments using MERN stack for an app designed to help users store and manage documents like text (or links to Google Docs) for blog and social media posts.

mern_stack_app_online_post_manager.1080p.1.mp4
  • create account, login / logout (JSON Web Tokens)
  • protected API routes = after succesful login, user may now access just their own set of documents
  • create new document, on submit added to the database and renders to the "dashboard"
  • dotenv module and .env file for sensitive data

Stack:

MongoDB with Mongoose Express Node.js React.js (using Create React App)

Testing requests: Postman API Platform Original design files: Figma

Next ToDos: work in progress

Auth

  1. Potentially SSO to replace current JWT email & password system

Earlier concepts

Earlier concepts and frontend designs here.

mern-post-app's People

Contributors

rhw-repo avatar

Stargazers

avatar avatar avatar

Watchers

avatar

mern-post-app's Issues

Debug Select Creatable component when rendered in CreateNew

CreateNew.js line 144
Runtime: Infinite loop occurs when this component renders ExperimentalAllTagsSelect
Occurs in isolation: does not occur when ExperimentalAllTagsSelect is used in Edit.js
Review useEffect hooks to prevent loop occuring
During this fix, carefully rename Experimental AllTagsSelect - component name is too long

Test dev branch (Jest & React Testing)

Ideally the following after bugfix for inifinte loop on render of ExperimentalAllTagsSelect in CreateNew.js (and renaming of ExperimentalAllTagsSelect to a much shorter name) -
Branch feature/refactor-code-smell created, refactored re: avoid inline styling or inline event handlers
Error handling: Error Boundary added to reinforce specific error handling for requests to server
Branch feature/refactor-css-modules created
All merged into dev branch
Ideally the following after bugfix for inifinte loop on render of ExperimentalAllTagsSelect in CreateNew.js (and renaming of ExperimentalAllTagsSelect to a much shorter name) -
Branch from dev to create a branch specifically to test it

React Async Helmet

Research

  1. Adding React Async Helmet & Helmet Provider to control HTML section
  2. Can be used to set CSP on backend

Add media queries & review re: responsive design

Project designed for desktop yet should display and respond correctly across different devices
Ideally the following should happen after bugfix

(for inifinte loop on render of ExperimentalAllTagsSelect in CreateNew.js and renaming of ExperimentalAllTagsSelect to a much shorter name)

Reviewing all frontend components identify where display is poor at 320px
List out components & issues
Table:
Strategy for responsive table: adding data-title may be appropriate
Generally:
Width and height causing issues, review to refactor without (Flexbox) and/or review to write media queries

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.