# 1) Creating a personal website: Project Setup (ReactJS ExpressJS & unit testing).

## Preparation
### Introduction
Hello this is Rashid, this is the first video for me in this channel, and this video is meant to be a part of a playlist that explains how do I build my personal website. This course will cover topics such as, testing, user interface design, some CI/CD and so on.

This course is not meant for beginners, if you are a beginner, I’d recomend you to learn javascript, Git, and some html and css before you continue.

### Install Node, VSCode and Git
I choose to build my website using nodeJS, so first make sure nodeJS and git is installed in your machine.
I'm using VS code as my favourite editor of chiose, feel free to choose yours.

### Tools, frameworks and languages
For this project we will use a compination of ExpressJS and ReactJS.

## Overview

This is what we will achieve by the end of this course, this is not a live completed website, however it is a design I did using Adobe XD, by the way, guys if you want me to make a video explaining how did I design the website user interface, write a comment below.

If you see here, there is a navigation bar, with links that should auto scroll the browser to the section.

A hero area that has a background image that I took in a cafe with a title, some text and a CTA button.

Another section contains a video on the right and a paragraph with title in the left.

And the most interesting section I believe is the skills one. I make each skill with a bar that shows the percentage of how I think myself good at this skill. And below the bar, is a link for related projects, it should display related project that I made to each skill.

Then below a small section for what I believe is well said, it might has one forever or changes like a slider every moment, will see how would be the implementation during the course.

Then the projects section, started with a paragraph and photos of projects with project name. When a user click on one of them, it shows details about projects and used skills. It displays only 6 projects in the main page, however, there is a button to scale the section to display more projects.

Another section is for articles I wrote, despite that I never write an article, but for the purpose of this course I will copy dummy once from our friend (lorem ipsum). This section is linked with Wordpress api, so it returns number of comments, date tags and so on.

Last content section is the section where visitor can contact me, easy normal form on the left and direct contact information on the right.

At the end of the main page as you can see simple footer with logo and copyrights.

## So Let’s Start
### Project structure
So let’s start with building the backend file architecture. First we need to create a directory for our project, I will call it my personal website. I am using the terminal, for me it is faster when use terminal because I try to reduce the mouse usage, moving hands from keyboard to mouse and the other way around makes me slower, that what I think, you can create files and directories using the the common way it doesn’t really matter. Then, CD into that file.

I’ll initialise the git repo by writing `git init` you can see the outputted message tells us the repo is been created. Then I will initialise npm project by running the command `npm init -y`.

First file I’d like to create whenever I have git repo is the git ignore file, so let’s create it, `touch .gitignore`. Then by that we can ask git to ignore node_modules and more files will be added though the time. For now I will ask git to ignore only node_modules directory.

I will create `app.js` file which would be the main file for the backend. Then I will make folder for tests, and another folder for routes.

### First Endpoint
let’s build the express app, where we need to open our app.js file.
* As expected we need to import the express library.
* Then create an instant of express.
* and listen to a port 3000.

Let test if it works. .. yeah, however, if I edit my project I need to restart the server. So, I will install a package you might heard about called `nodemon` from npm and save it as dev dependency. `npm i --save -D nodemon` then, in `package.json` I’ll add start in the script that runs nodemon.

Now, when I run the server and change anything it will automatically restart, that saves debugging time.

I’ll do the first endpoint so I can test if everything is working as expected.

So this endpoint should response with ’it works’ whenever it’s been called.

From browswer, I will head to http://localhost:3000/ . .. yeah it shows the message it works.

## Conclusion
That’s all for this video, in the next video, we will design our test-cases for the endpoints and work with routes. Thanks for watching and don’t forget to subscribe to the channel and interact in comments bellow and like the video if you do.
sex.com