BEST

Programming

Web Development

Building Your Own Company Website with React, Node.js, MongoDB: Complete Guide

Name: Building Your Own Company Website with React, Node.js, MongoDB: Complete Guide
Price: 44000 KRW

This is a practical course where you can learn how to build a company website yourself using React, Node.js, and MongoDB. Let's build a full-stack project together with a basic background in React and Node.js!

(5.0) 19 reviews

224 learners

dakgangjung123

프로젝트

React

Node.js

MongoDB

HTML/CSS

JavaScript

Reviews from Early Learners

What you will learn!

Design and Implement Trendy UI with React & Tailwind CSS
Building a backend server with Node.js and Express
Database Design and Management with MongoDB and Express Router
Understanding Data Communication Between Frontend and Backend
Real company website-level project completion

Updated 2025-03-23

My own company website is finally live on the official domain! 🎉
https://my-company.site
Please access and experience the course directly before purchasing it.

🔐 Instructions for accessing the administrator page
https://my-company.site/admin
ID: admin / Password: test123

AWS S3 and TinyMCE editor are currently disabled due to cost issues.
I would appreciate it if you could just take a quick look at it to check out the functional configuration :)

How does your company's website shape your customers' first impression?

The answer lies in a powerful technology stack utilizing React, Node.js, MongoDB, HTML/CSS, and JavaScript . Many users are experiencing interaction through the trendy UI and efficient data management of the corporate site.

In this course, we will design the front-end with React and the back-end with Node.js and MongoDB to complete a project at the level of an actual company website. We will cover in depth the core technologies required in practice, such as efficient state management, RESTful API integration, and database design.

Rather than simply following tutorials, learn systematically to create a production-ready website and acquire the feel of a real developer!

Features of this course

📌 We will reveal the know-how of creating a website that determines the first impression of the company. We will pass on the efficient and practical development methodology gained through 3 years of project experience.

📌 We provide essential technologies and insights for practical use, including schema design, state management, and database optimization , from the front-end to the back-end .

📌 20% theory, 80% practice. You will write and test all the code yourself, and create a high-quality website that actually works.

📌 A course for those who want to advance from intermediate to advanced. Anyone with basic knowledge of HTML, CSS, JavaScript, and React & Node.js can follow along.

After class

You will be able to create projects at the level of actual company websites using React, Tailwind CSS, Node.js, and MongoDB .
You will systematically understand RESTful API design and state management , and be able to efficiently process data between clients and servers.
You can systematically manage data by designing and optimizing a database using MongoDB .
You will experience the process of developing a production-ready website and create a portfolio that can be used in the field.
During the development process, you can improve the quality of your code through testing and debugging , and complete a stable website.

Recommended for
these people

Who is this course right for?

Those who want to challenge full-stack web development with React, Node.js, and MongoDB
Those who want to complete projects at the level of a real company website.
Beginners who are starting web development for the first time but want to learn systematically
Job seekers and employees looking to add projects to their portfolio
Those who want to build a foundation and learn practical development skills

Need to know before starting?

React
Node.js
HTML
CSS
JavaScript

Hello
This is

424

Learners

Reviews

Answers

5.0

Rating

Courses

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

GitHub 저장소 바로가기 (클릭!)

Curriculum

All

76 lectures ∙ (15hr 13min)

Course Materials:

Lecture resources

Section 1. Ch0. Intro and Setup

6 lectures ∙ (24min)

Section 2. Ch1. (Frontend) Creating a company page - 1

7 lectures ∙ (1hr 30min)

7. Ch1-1. Understanding React Project Folder Structure and File Roles
03:48
8. Ch1-2. Learn How to Install Tailwind CSS and Apply Fonts
04:49
9. Ch1-3. Installing Useful Extensions in VS Code
03:54
10. Ch1-4. Building Navigation Bar (Navbar) Component (1)
18:15
11. Ch1-4. Creating a Navigation Bar (Navbar) Component (Part 2)
21:19
12. Ch1-5. Creating the Footer Component
21:42
13. Ch1-6. After Creating the Company Page, Setting the Routing Path in App.jsx
16:24

Section 3. Ch2. (Frontend) Creating a Company Page - 2

3 lectures ∙ (1hr 3min)

14. Ch2-1. Creating the Main Banner of the Main Page (Hero.jsx)
33:26
15. Ch2-2. Creating the Forum (Forum.jsx) on the Main Page
16:17
16. Ch2-3. Developing the Main Page's Contact Us (Contact.jsx)
13:58

Section 4. Ch3. (Frontend) Making a Company Page - 3

5 lectures ∙ (1hr 42min)

Section 5. Ch4. (Backend) MongoDB and Express Based Admin Account Management

6 lectures ∙ (1hr 26min)

Section 6. Ch5. (Backend) MongoDB and Express-based Administrator Account Management

11 lectures ∙ (2hr 8min)

Section 7. Ch6. (Full-stack) Implementation of Inquiry Management System

9 lectures ∙ (1hr 35min)

Section 8. Ch7. (Full-stack) Implementing a Customer Inquiry Management System

9 lectures ∙ (1hr 14min)

Section 9. Ch8. (Full-stack) Inquiry Management System Implementation

13 lectures ∙ (2hr 38min)

Section 10. Ch9. Appropriate Motion & Multilingual Support & Company Page Deployment (Upload completed on January 30, 2025)

3 lectures ∙ (51min)

Section 11. (Supplement) HTML & Tailwind CSS & JavaScript & React Basics

4 lectures ∙ (36min)

Published:

Last updated:

Reviews

All

19 reviews

5.0

19 reviews

JIWOO KIM
Reviews 7
∙
Average Rating 5.0
5
30% enrolled
- 닭강정
  Instructor
  안녕하세요. JIWOO KIM님. 소중한 별점 남겨주셔서 감사합니다. 덕분에 다음 강의를 준비하는 데 큰 힘이 됩니다. 앞으로도 학습에 많은 도움이 되길 바랍니다!
JMK
Reviews 8
∙
Average Rating 5.0
5
100% enrolled
덕분에 MERN 스택 전체를 맛 볼 수 있었습니다!
- 닭강정
  Instructor
  안녕하세요. JMK 수강생님. 소중한 후기 감사합니다! MERN 스택 전체를 한 번에 경험해보셨다니 정말 기쁘네요. 앞으로도 학습에 도움이 되길 바랍니다! 감사합니다.
김진우
Reviews 2
∙
Average Rating 5.0
5
61% enrolled
어느정도 지식이 있는 상태에서 보면 도움되는 강의. 빠르게 진행되지만 기초지식(node의 미들웨어나 json의 데이터를 옮기는 구조 등)이 조금 있다면 프로세스를 알기 쉬운 강의라고 생각됩니다. 저는 모르는부분은 열심히 찾아보면서 하고 있는데 도움이 됩니다. 감사합니다!
- 닭강정
  Instructor
  안녕하세요. 김진우 수강생님. 좋은 피드백 남겨주셔서 감사합니다! 이미 기초 지식이 있으신 분들에게 도움이 되었다니 기쁩니다. 앞으로도 더 좋은 강의로 찾아 뵙도록 하겠습니다. 응원합니다!
윈터
Reviews 2
∙
Average Rating 5.0
5
38% enrolled
자세하게 알려주셔서 너무 좋아요 :) 좋은 강의 감사합니다!
- 닭강정
  Instructor
  별 5개와 소중한 후기, 정말 감사합니다! 저희 회사 웹사이트 강의를 들어주셔서 감사드리고, 다음 강의에서도 또 뵙길 기대하겠습니다!
김진규
Reviews 3
∙
Average Rating 4.7
5
30% enrolled
- 닭강정
  Instructor
  소중한 리뷰와 별점 5점을 남겨주셔서 진심으로 감사합니다. 저희 회사 웹사이트 강의 과정을 함께해 주신 덕분에 큰 힘이 되었습니다. 앞으로도 더욱 알찬 강의로 보답드리겠습니다.

$34.10

dakgangjung123's other courses

Check out other courses by the instructor!

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

닭강정

이 강의에서는 React와 FastAPI를 활용해 실시간 투표, 댓글, 좋아요 등의 소셜 기능은 물론, 결제 시스템(카카오페이, 토스페이 등)을 연동해 수익화하는 방법까지 단계별로 실습합니다.

중급이상

React, MySQL, Docker

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

닭강정

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

🔥 HTML + Tailwind CSS + 순수 JavaScript만으로 완성하는 Firebase 사용자 인증! 소셜 로그인·휴대폰·위치 인증까지, 복잡한 백엔드 없이 쉽고 빠르게 계정 시스템 구축합니다.

초급

HTML/CSS, JavaScript, Firebase

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

Similar courses

Explore other courses in the same field!

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

닭강정

중급이상

React, MySQL, Docker

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

닭강정

조코딩의 코딩 기초와 웹 풀스택 개발

조코딩

코딩 1위 유튜버 조코딩의 실전 압축! 쉽고 재미있는 웹 풀스택 개발 강의

입문

HTML/CSS, JavaScript, Node.js

조코딩의 코딩 기초와 웹 풀스택 개발

조코딩

파이썬 Streamlit 활용한 웹 자동화 업무, 데이터 검색 및 시각화

보안프로젝트

파이썬 Streamlit 라이브러리를 활용하여 여러 유형의 데이터를 분석하고 빠르게 시각화 해서 웹 서비스 기반으로 출력하는 방법을 배우게 됩니다. 기존 웹 개발 방식보다 빠르게 업무에 적용하고 싶을 때 활용할 수 있습니다.

초급

Python, streamlit, MongoDB

파이썬 Streamlit 활용한 웹 자동화 업무, 데이터 검색 및 시각화

보안프로젝트

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

초급

Node.js, React, Redux

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

💡 비개발자도 AI와 함께 단 10시간 창업 MVP부터 수익화 서비스까지! 💰 외주비 수천만원이 필요했던 개발 이제 12만원으로 완전 해결 🎯 명함인식, 감정분석, 입지분석까지 실전 비즈니스 프로젝트 5개 완주 🔥 기획자, 마케터, 예비창업자라면 개발자 없이도 아이디어 구현 ⚡ 지금 시작하면 평생 써먹을 개발 자립 능력을 획득하세요!

입문

HTML/CSS, Java, 웹앱

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

Node.js로 웹 크롤링하기

제로초(조현영)

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기

제로초(조현영)

자바스크립트 머신러닝 TensorFlow.js

김영보

자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

중급이상

Tensorflow, JavaScript, 머신러닝

자바스크립트 머신러닝 TensorFlow.js

김영보

비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS

banana-coder

웹사이트를 만드는 개발자가 되기 위해선 배워야 할 기술들이 많습니다. 그 많은 기술들 중 가장 먼저 배워야 할, 웹사이트의 제작의 기본인 HTML, CSS에 대해 설명합니다. HTML, CSS를 작성하는 방법을 배우고, 마지막엔 아마존이라는 실제 웹사이트를 비슷하게 만드는 프로젝트를 합니다. 그리고 만든 프로젝트를 url로 만들어 배포할 수 있도록 합니다.

입문

HTML/CSS, github-desktop

비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS

banana-coder

시나브로 자바스크립트

이은재

자바스크립트로 다양한 주제를 바닥부터 개발해 보며 튼튼한 실력의 기반과 자신감을 쌓아보세요.

중급이상

JavaScript, vanilla-js

시나브로 자바스크립트

이은재

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

초급

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 백엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Node.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

Node.js, MySQL, Express

[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

코딩의세계 한태재

React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

초급

인터랙티브 웹, react-three-fiber, Three.js

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

코딩의세계 한태재

Node.js의 모든 것

yongsoocho

기초부터 차근차근 실력을 탄탄히 다져 가며 Node.js 실력을 완성하는 올인원 강의 👍

초급

Node.js, AWS, PostgreSQL

Node.js의 모든 것

yongsoocho

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

타입스크립트와 리액트 관련 강좌입니다.

중급이상

React, TypeScript

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

핵심만 골라배우는 JavaScript

수코딩

프론트엔드 입문자들은 필수적으로 익혀야하는 Javascript 문법! 기초부터 시작해서 고급에 이르기까지 javaScript 언어를 샅샅히 파헤쳐봅니다!

입문

JavaScript

핵심만 골라배우는 JavaScript

수코딩

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

빠른 실행과 검증의 시대, 바이브 코딩으로 누구보다 빠르게 실행하세요! 광고, 결제 등 수익화까지 빼놓지 않고 내 손으로 이루어 보세요.

입문

React, 웹앱, Next.js

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

[2024]리베하얀의 HTML 기초 실무

리베하얀

HTML 기초문법을 다루는 강의입니다. 다양한 사례의 미션이 존재하며, 실무에서 사용가능한 최신문법까지 알려드립니다.

입문

HTML/CSS, nvda

[2024]리베하얀의 HTML 기초 실무

리베하얀

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

초급

GraphQL, Svelte, MongoDB

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

LIZ.B

웹디자인기능사 실기 시험을 준비하시는 분들에게 짧고 쉽게 배우는 강좌를 준비했습니다. 단지 시험 때문이 아니더라도, 웹표준 양식에 맞는 사이트 구현에 관심있으신 분이라면 환영합니다.

초급

HTML/CSS, jQuery, 웹 디자인

쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

LIZ.B

Building Your Own Company Website with React, Node.js, MongoDB: Complete Guide

Reviews from Early Learners

What you will learn!

Updated 2025-03-23

How does your company's website shape your customers' first impression?

Features of this course

After class

I recommend this to these people

Create your own company website with React, Node.js, and MongoDB: The Complete Guide - Introductory Video

Learn about these things.

Who created this course

Things to note before taking the class

Practice environment

Provided materials: Source code, PDF lecture materials, example project files

Player Knowledge and Notes

Recommended for
these people

Hello
This is

Curriculum

Reviews

dakgangjung123's other courses

Similar courses

Building Your Own Company Website with React, Node.js, MongoDB: Complete Guide

Reviews from Early Learners

What you will learn!

Updated 2025-03-23

How does your company's website shape your customers' first impression?

Features of this course

After class

I recommend this to these people

Create your own company website with React, Node.js, and MongoDB: The Complete Guide - Introductory Video

Learn about these things.

Who created this course

Things to note before taking the class

Practice environment

Provided materials: Source code, PDF lecture materials, example project files

Player Knowledge and Notes

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

dakgangjung123's other courses

Similar courses

Recommended for
these people

Hello
This is