DEV Community: WebDevZTH

Epic Todo ✅

WebDevZTH — Wed, 07 Sep 2022 16:53:18 +0000

Implement a full-stack todo application in different tech stacks using different tools and techniques

Aim ✨

To make a fullstack todo application with different variations of backend api's (REST, Graph, RPC) and frontend libraries/frameworks (React, react-native, Nextjs, graphql-client) using different tools and techniques.

Overview 📚

Build different versions of client using react, react-native, nextjs
Use different client-side tools react-query, axios, redux, redux-saga, mobx, custom hooks, graphql-client, react-bootstrap, tailwind-css, chakra-ui
Use different rendering strategies CSR, SSR, ISR (all using nextjs)
Build different versions of server api using REST (MVC architecture), Graph (graphql), RPC (tRPC/gRPC)
Use different server-side tools joi, yup, zod, jwt, express-jwt, bcrypt, argon2d, morgan, express, busboy, formidable, multer, helmet, winston
Use different databases postgres (SQL), mongodb (noSQL)
Use different ORMs prisma, mongoose, typegoose
Use firebase tools firebase-auth, firestore
Implement basic CI/CD using github-actions
**Setup horizontal scaling with pm2, nodejs-built-ins (fork, process, worker)
**Use message-queues rabbit-mq, bullmq
**Use server-side caching redis
**Use websockets with socket.io

PS: All items marked with (**) will be low priority

Procedure 👨‍🔬

Different versions of frontend todo-client using different libraries mentioned above.
Fetch data using different tools mentioned above.
Experiment with different client-side techniques like lazy-loading, Suspense, code-splitting and component-injection.
Experiment different techniques in server-side like refresh-token/access-token, email verification, logging, clusters, thread-workers, caching, sticky-sessions.
Enable basic CI/CD for projects.
All different variations of stack will be in different branches of this repository.

Outcome 🎯

Learn these different tools and tech stacks.
Experiment with a variety of 3^rd party services like firebase-auth and firestore, other ecosystem tools.
To Become a better full-stack engineer.

Why a todo-app ⚛️

Its a dynamic application which requires GET, POST, PUT/PATCH, DELETE operations in terms of database operations.
We can build this app with many variations and the codebase size will be manageable by a single or small group of devs who want to learn and explore hands on.
We can experiment and prototype rapidly since the application logic is simple.
We can then increase the engineering complexity and not feel lost due to simple nature of application.

**Attention ( for developers ) 🛑

This repository code is based in the nodejs and javascript ecosystem, we will mainly work with javascript and add typescript functionality in a different branch.

Visit the repository on Github Epic-Todo

PART I 👉 Full-stack todo app built using react, express and mongodb (coming soon!)

Let me know if you'll be following along with the progress down in the comments 🥳

My Express application folder structure and setup for fullstack projects

WebDevZTH — Tue, 10 Aug 2021 05:28:25 +0000

So far I've been using Nodejs and Express in the back-end for all my full stack projects. I saw a lot of repositories and developers code to get an understanding of what a good folder structure should look like.

Why bother with folder structure?
Its all about the structure, it makes code maintainable and we can easily pin-point bugs, when they arise in the code base. It makes it easy for contributors to help grow the code base efficiently.

A quick breakdown of the folders and files.
At the root of the project we have a configuration folder that houses the config.js file and we can access the .env file by using dotenv package, safely and securely without compromising security of sensitive data like the database url, hashing secret and other keys that are critical to the development of our application.



require("dotenv").config();

const config = {
  env: process.env.NODE_ENV || "development",
  port: process.env.PORT || 3001,
  mongoUri: process.env.MONGODB_URI,
  jwtSecret: process.env.JWT_SECRET || "YOUR_SECRET_KEY",
  braintreeId: process.env.BRAINTREE_MERCHANT_ID,
  braintreePublicKey: process.env.BRAINTREE_PUBLIC_KEY,
  braintreePrivateKey: process.env.BRAINTREE_PRIVATE_KEY,
};

module.exports = config;

Next, we can come to the MVC architecture of the application. The Model-View-Controller is at the heart of the application, the views are handled in the client folder with React.
Models are where we define our database Schema or the structure of the way we want to store specific data into our database, In this project I have used MongoDB for the databse, it is a collection of documents and each document is an instance of the model we define.
Controllers are the way we interact with the database to create, read, update, delete data to and from the database. All of the logic of how our server processes incoming requests and responds to users requests is handled by the controllers.
Finally, Routes folder houses all the endpoints that we expose to query data and send information to the server, it contains different controller logic as middleware to sanitise and ensure that requests to the server are processed in the correct order.

What is Model-View-Controller?
This is a design pattern that is commonly used for web-applications and is one of the most popular design patterns. The View part in a MERN (Mongo, Express, React and Node) application is handled in the front-end by React library. The express based backend which is running in Node is where we have the Controllers, Routes and Models.

Try using this approach in your next project, please share other interesting design patterns for full-stack web development projects ^_^

Creating a custom hook in React to control form input

WebDevZTH — Tue, 10 Aug 2021 03:56:47 +0000

There are numerous ways to make a form input controlled from not controlled. The internet is mostly just a collection of forms ^_^ and one solution to make interacting with form inputs is to use the following approach...

Suppose we have a form with a single input field

<form>
<input type='text' id='username'/>
<button type='submit'>Send</button>
</form>

In the above example we are sending the field 'username' to our backend or to some end-point on submitting this form. To do this we must have two things a 'onSubmit' event and a way to keep track of the data entered into the input field of the form, one approach is...

const [value, setValue] = useState('')

<form onSubmit={handleFormSubmit}>
<input value={value} onChange={({target}) => setValue(target.value)} type='text' id='username'/>
<button type='submit'>Send</button>
</form>

The above snippet is making use of the 'useState' hook to make this component stateful. We are then passing the value and onChange event handler to the input field to keep track and store the value enetered into 'username'

This approach works fine and good but we will have to define multiple 'onChange' event handlers if our form gets more input fields and as the complexity grows the components code will start to look messy.

One thing we can use here is custom hooks, that is we create a function that utilises the react-hooks and customise its behaviour to suit our needs. One approach to do this is like so...


import {useState} from 'react'

export const useField = (type) => {
 const [value, setValue] = useState('')
 const onChange = (event) => {
  setValue(event.target.value)
 }
 const reset = () => {
  setValue('')
 }

 return {
  type,
  value,
  onChange,
  reset
 }
}

Now we can import this custom hook into any component where we want to use input fields, like so...

import useField from '..file its being exported from'

Then we can use it in our react component, like so..

const {reset, ...username} = useField('text')

<form onSubmit={handleFormSubmit}>
<input {...username} type='text' id='username'/>
<button type='submit'>Send</button>
</form>

Now one way to implement the handleFormSubmit is like so...

const handleFormSubmit = (event) => {
 event.preventDefault()
 let userObject = {
  username: username.value
 }
 // send data to backend
 reset()
}

We can call the reset method after successfully sending form-data to the backend and the input field is reset to an empty string.

Using this approach we make the code much cleaner and dont need to use multiple useState hooks within our components which clutters the code.

Try this in your next form in React! ^_^

How I got comfortable with Javascript as a newbie

WebDevZTH — Sun, 18 Apr 2021 08:49:16 +0000

Which programming language to pick?

So you decide to get into web development and wonder which language you want to learn to code in, let me help you out.. The answer is straight forward, pick Javascript.
NB: There are 2 kinds of programmers, the ones that type in JavaScript and the ones who type in Javascript. Pick one!

Why Javascript, why not xyz language?

So it's a well know fact that the modern web is filled with multiple technologies, Javascript happens to be on in every single nook and cranny of the world wide web, so speak the language of the land you want to be a part of, you can always learn other languages later on.

Learning programming is not a linear progression, you won't get far following a step-wise learning approach, personally it doesn't work for me.
If you want to build a chat application,you don't learn the C programming language, then python, then Data Structures and Algorithms... you build a chat application, find out how to build one, what technologies are used and then get to work on that, linear progression in programming is a myth and doing 1000 different programming tutorials, ticking things off one by one in an imaginary check list of 'programming topics' you made isn't going to work.

Having said that, Javascript is a must for any aspiring web developer and it is amazing how you can learn one language and pick up the fullstack as you get more experience!

Javascript can be challenging but trust me the quirks of the language are awesome and the community of developers are so amazing, there's always help available to those that seek it.

How to learn Javascript?

Personally, the best resource for me to learn Javascript was this course by Bogdan Stashchuk and get a good understanding of most of the core features like

ES5 syntax
ES6 syntax
Callback functions
Asynchronous programming
Javascript engine and how it functions

For months I struggled with a slew of tutorials, code alongs and what-not until I saw this course and trust me, the name Javascript Bible is no understatement.

I am in no way affiliated or sponsored by Bogdan or Udemy, I just know this course is awesome and it helped me go from 0-100 in 4 months. I am confident of my Javascript skills and am always learning more, but my understanding of the internals of the language is all thanks to Bogdan's course!

My learning path in the last 5-months

So I wanted to share my learning path for web development with whoever comes across this article and is interested or wants some clarity on where to start..

Have a project in mind! don't just learn code to be a coder, that's vague.
Look at what tools and technologies are being used to create such applications.
Do a code along an create that exact thing, it's okay if you don't understand, when you're confused, you're mind is learning!
Now that you know the moving parts involved to build that application, get to work and start learning those skills.
I wanted to build a website where I host my own tutorials and courses, even though I am a beginner but I want to put out free content for people to access.
I looked at tutorials and code alongs of other experienced programmers and quickly understood that I wanted to learn node.js, react, HTML, CSS, Javascript.
Okay, then I got to work. I'm still learning, I'm on the react bit now! Then I'll get to node.js :D
Be realistic and give yourself time to learn and absorb, you won't be a web developer in 4 months or 6 months, give your self time, everyone has a different learning approach find yours and be patient.

Where I learned from:

Javascript by Bogdan Stashchuk, complete all of it and practice everyday.
HTML, CSS, Javascript, this is Mozilla's free-for-all Web development bootcamp, complete this and you're on your way. Trust me, this is the best resource to start and get a good understanding of the old and modern web landscape.
FullstackOpen 2021, once you are done with the previous parts and have built a couple of web pages, do this free-for-all fullstack modern web development course, it's organised by the University of Helsinki and the content is a contribution of experienced and awesome developers, namely Matti Luukkainen who is a professor at the University.
Documentation! Always read the docs, as you do the first two parts of my suggested material, it will become easier to read the docs.

Have fun, keep coding and be patient! Good things come to those who wait