Are you interested in full stack web development? Do you want to create amazing web applications with MERN? Are you curious how MERN works? By using MERN as the tool, we can create various possibilities from the web. Come join us in “Leveling Up your Branding and Mastering MERN: Fullstack WebDev” hosted by GDSC UNSRI!

1. MERN STACK
Full Stack Web Development (BE x FE)

2. Huda Prasetyo
Introduction
Full-Stack Developer
at GITS.id
Widyatama University
GitHub Medium LinkedIn

3. MERN Coverage

4. Coverage
1. Introduction to NodeJS as as runtime environment;
2. Introduction to MERN Stack;
3. Prerequisites for Studying MERN;
4. Create REST API with Express and MongoDB;
5. Consume API with React;
6. Tips & Trick MERN Stack development.

5. Introduction to
NodeJS as a Runtime
Javascript

6. NodeJS as a Runtime Javascript
Node JS is JavaScript runtime that
can execute JavaScript outside
Browser
1. Not a Language, it’s a runtime;
2. Written in C++;
3. Built on V8 JS engine (G-Chrome);
4. Possible run JS code in server or
client;

7. Introduction to
MERN Stack

8. JS in Nutshell

9. What is MERN Stack?
1. MERN Stack is set development that use:
- MongoDB;
- Express;
- React;
- NodeJS.
1. MERN Stack used for Full-Stack Development;
2. Developing with the same technology/programming
language

10. Why MERN Stack? Is It Popular?
1. Technology is easy to understand;
2. One Primary Language (JavaScript);
3. Modular;
4. Consistent;
5. Fully supported development stack around the world.

11. Stackoverflow Developer Survey 2023

12. Rapid Development
Source

13. Prerequisites for
studying MERN Stack

14. What You Need to Know
1. Basic understanding Javascript (ES2016);
2. Basic understanding Front-End (React);
3. Basic understanding Back-End (Express);
4. Basic understanding API;

15. MongoDB
MongoDB is a NoSQL database
that uses JSON data type that
shipped very well with
JavaScript.

16. Express
Express is a minimal and
flexible Node.js web
application framework

17. React
React is Javascript Library
for building user interfaces
based on components.

18. NodeJS
Node JS is JavaScript runtime
that can execute JavaScript
outside Browser

19. TypeScript
Typescript is statically
typed programming language to
reduce number of bugs and
issue with data type in
Javascript.
Because, Javascript is
Freestyle Language!

20. JS in Nutshell

21. IMPLEMENTATION

22. How API Work
Source

23. DEMO

24. Tips & Trick MERN
Stack Development

25. Tips & Tricks - Technical
1. [FExBE] Do testing (Unit Test);
2. [FExBE] Keep code modular (reusable);
3. [FExBE] Learn TypeScript;
4. [FE] Learn state management (Redux);
5. [FE] Learn React Hooks (useMemo, useCallback, etc)
6. [BE] Learn Restful API
7. [BE] Learn optimize API;

26. Tips & Tricks - General
1. Always make documentation;
2. Read code documentation;
3. Use roadmap;
4. Keep Learning;

27. JUST INFO
Is full-stack development handled by
one person?!
It DEPENDS!

28. Thank You, Any Questions?