Visit LEDU token page

How to create a Trello.com Clone web app using Node.js

How to create a Trello.com Clone web app using Node.js

  • English
  • Programming
  • Node.jsNode.js
  • (3951)
  • Project length: 15h 39m

This tutorial will cover all the details (resources, tools, languages etc) that are necessary to build a complete and operational Kanban board (Trello.com) web app. You will be guided through all the steps and concepts, starting from the basic ones like setting up the right tools and frameworks to the more advanced topics related to the development. And ultimately you will be able to create your own dynamic single page website (SPA) without any difficulty.

Overview

Introduction

This tutorial will cover all the details (resources, tools, languages etc) that are necessary to build a complete and operational Kanban board (Trello.com) web app. You will be guided through all the steps and concepts, starting from the basic ones like setting up the right tools and frameworks to the more advanced topics related to the development. And ultimately you will be able to create your own dynamic single page website (SPA) without any difficulty.

What are the requirements?

  • HTML/CSS
  • JavaScript or TypeScript
  • A basic understanding how the web works
  • And the most important is: desire to learn

What is the target audience?

  • You want to build single page or dynamic web pages
  • You want to learn more about current web technologies
  • Learners who want to enhance their knowledge
  • This course will help the students who are doing their final projects

When are the streaming sessions (streaming schedule)?

Weekly 6 pm CEST (12 pm EST) on Wednesday

Project Outline

Session 1: Setting-up the Environment

  • Setting up the programming environment (Cross platform)
  • Initializing project and source control

Session 2: Intro into the used technologies (MEAN stack)

  • What is Node.js and NPM and why do I need it?
  • Overview over Angular frontend
  • Overview over express servers
  • Intro to MongoDB a NoSQL Database

Session 3: Creating our first Angular component

  • Angular project organisation and different elements
  • Creating a component using the Angular CLI
  • Adding basic content, styling and logic

Session 4: The Angular Router

  • Adding the router to our project
  • Configuring and changing routes

Session 5: The API

  • Create Express app
  • MongoDB database model
  • Express routing

Session 6: Connecting front and backend

  • Saving and retrieving data from the database
  • Call the api from the frontend
  • Display data from the database

Session 7: Creating boards and lists

  • Creating boards and lists on the frontend
  • Dialogs for input
  • Creating and saving them on the backend

Planned sessions

Session ?: Users and Security

  • Passport and Basic Auth
  • Checking access rights
  • JSON Web Tokens (JWT)

Reviews

Average rating

5(3951 Reviews)