loading...
Cover image for Software Developer Workflow 2020 (MERN Stack)

Software Developer Workflow 2020 (MERN Stack)

andrewbaisden profile image Andrew Baisden ・2 min read

Useful Tools and Frameworks

ESLint - Pluggable JavaScript linter

Jest · 🃏 Delightful JavaScript Testing

React Testing Library · Testing Library

Mocha - the fun, simple, flexible JavaScript test framework

Chai

TypeScript - JavaScript that scales.

TSLint

MERN Tech Stacks

Mongo, Express, React/React Router, Node (create-react-app)

Mongo, Express, Next, Node

Mongo, Express, Gatsby, Node

  • For small projects use React Hooks
  • For small to medium projects use the Context API
  • For medium to large projects use Redux or GraphQL

Step 1: Project Setup

  1. Create a Git Repo for the project
  2. Create a Kanban Board Project using GitHub Projects, Notion etc...

Design the App (Optional if you have a design already there is no need)

Using a design tool like Adobe XD, Sketch, InVison Studio, Figma etc...

Step 2: Build App

  1. Decide on the Technical Stack and folder structure (React, Redux, Next, Gatsby, Node.js, MongoDB, GraphQL etc...)
  2. Decide on the CSS Layout Structure for the front end (CSS Grid , Flexbox, CSS framework (Bootstrap, Bulma, Tailwind etc...))

Use the Peacock Visual Studio Code extension to set the colour theme for the project. (Optional)

CSS: styled components or Sass/Stylus/CSS

Linting: ESLint

TDD/BDD: Jest and React Testing Library (Front-End) Mocha and Chai (Back-End)

Code Formatting: Prettier

TypeScript (Optional if you want to have better error checking for your code)

Linting: ESLint

Type Checking: TypeScript

Step 3: CI/CD

Gitflow Workflow | Atlassian Git Tutorial

  1. Use Continuous Integration, Continuous Delivery and Continuous Deployment

CI/CD: GIT, GitLab, BitBucket, CircleCI, Travis CI, Jenkins, Heroku, Netlify, Now, Docker

Posted on by:

andrewbaisden profile

Andrew Baisden

@andrewbaisden

Full Stack Developer, Gamer, Anime Addict ٩(●ᴗ●)۶

Discussion

markdown guide
 

Also learning the MERN Stack. Am actually focusing on Frontend. I was really struggling to understand to connect front end app to the server. Fetching data from an API. That led me to learning the MERN stack. Everything just made sense to me how it all connects. Will definitely be doing more MERN stack projects

 

I was like that too don’t worry it’s all part of the learning process. I started off with frontend too and for years my knowledge in node was basic. But it’s actually quite simple when you realise that it’s just Javascript on the backend. Connecting the frontend to a mongodb database is also simple as is doing the CRUD requests. I will have a post tomorrow that shows how to create a simple MERN app with CRUD functionality.

 

Alright. Thanks. I will be expecting that.

 

I'm currently studying the MERN stack so it's cool to see a post on it. Also, this is a great boiled down roadmap on what to do from start to finish on building an app.

I haven't ever used or even really looked into CI so I'm definitely taking a look at the links you have.

Thanks and great post!

 

Sure no problem there is more to come I have another MERN stack post for tomorrow.

 

This is very helpful! I recently started using MERN stack and I'm enjoying it so far. My only problem is with testing. I've tried using Jest and React testing library a couple of times and I still don't get it. It takes me forever to test my apps, do you have any good resources I could check out? Great post by the way!

 

Sure check out this new post I created. It has links to courses which have TDD/BDD dev.to/andrewbaisden/useful-course...

 
 

Waiting for your nexn post on MEAN Stack.
I'm too learning it. I have a question , I'll highly appreciate if you answer .

Can i deploy my react app (production build) locally on windows/linux with local server?

Thanks

 

Yes as long as they are static files they can be deployed to any serverless server.

 

Nice breakdown. Thanks for posting!

 

TSLint is deprecated should probably remove it and stick to ESLint.

 
 

For very big projects use React Hooks. & you don't need Redux