I'm doing 100 Days of code (and you should, too!)

100 Days of code challenges programmers to dedicate 1 hour per day to coding for 100 (consecutive) days. After putting it off for a long time, I finally decided to take a spin at the challenge.

I made the following pledge: I will create and (maybe?) deploy a social media platform within 100 days. In this series, I want to take you along for my ride in creating an app in 100 days.

Day 1

Today is my very first day of #100daysofcode. I started by setting up a backend using node.js, my preferred platform for backend development.

Technical Details

I chose SQLite as a database because it does not require the installation of a separate SQL server when setting up the backend.

I am writing all code for the challenge in TypeScript. Although I have used it before, I think building another project is a great way to get a bit more familiar with it.

I decided against using a framework for my frontend code. All HTML is server-rendered using ejs so that I can allow only my website access to specific data.

Getting to work

Before creating a social media platform, you need a name. That's one of the things I tend to have problems with because I'm just not creative enough to come up with a good one. So, let's call it imagine for now. Not very creative for a social media network, I know, but it will get the job done for now.

First, I created a little logo for myself:

Again, it's not great, but it works.

So, let's get coding!

First, I ran the typical npm init to set up my project directory. Then I installed typescript, which provides the tsc compiler for typescript.

Then I created a script in package.json to run tsc:

{
  "name": "100daysofcode",
  "version": "1.0.0",
  "description": "100 Days of code challenge",
  "main": "dist/server.js",
  "scripts": {
    "start": "node .",
    "build": "tsc"
  },
  "keywords": [
    "100daysofcode"
  ],
  "author": "Jake Sarjeant <pygamer138@gmail.com>",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }
}

Next, I installed all needed dependencies and their corresponding types

npm install debug chalk ora cookie death sqlite3 ejs eonjs serve-static @types/cookie @types/ejs @types/node @types/serve-static @types/sqlite3

Then, I created a new "tsconfig.json" file by running npm run build -- --init. Afterward, I created three folders: src, views and dist. My tsconfig looks like this:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "outDir": "./dist",                       /* Redirect output structure to the directory. */
    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

In the src directory, I created a new file, server.ts, to store my server code, and a file called eonjs.d.ts containing only the words declare module 'eonjs'; so that tsc understands eon. I am purposely not showing any code so you can figure out how to do this on your own.

Using EJS and some server-side logic, I created a home page that looks like this

And changes to the application's main page when the user logs in:

This is done by checking whether the 'token' cookie contains a valid JWT, or not.

Summary

Well, that's all I got done today. Stay tuned tomorrow for some more from me.

Anyway, I think that #100daysofcode is a cool challenge that every developer should participate in. It helps you make coding more of a habit, and also gives you a fixed timeframe to finish a project. Also, if you take part in this challenge, I recommend blogging about it. Blogging isn't only a great way to share your work and simultaneously get better at writing, it also helps you stay focused on a project. When you blog your participation in the challenge, the audience will expect you to finish your project, which is great practice for many developers.

If you like this kind of thing, remember to hit that like button and write a comment. If you think that I should share some code in these posts, make sure to comment that to let me know!

This post is available on dev