lawrence-godfrey / lawrences.tech

Personal Website for cataloging/displaying various projects. Built with React, Express, Node, MongoDB and Tailwind

Personal Website

This repository contains the source code for the Express.js backend server and React.js frontend client hosted at lawrences.tech. The website is hosted on an AWS EC2 instance running Ubuntu 18.04 LTS and is served using NGINX with a reverse proxy to the Express.js server.

This project started out as a way for me to learn the MERN stack (and learn JavaScript) and learn more about Single Page Applications, OAuth, web security, etc. and also to learn more about the DevOps side of things, like buying a domain name, setting up a server, configuring NGINX, setting up SSL certificates and so on. I am also hoping to use the site as a way to showcase various projects I'm working on in such a way that non-technical people can interact with them.

Future Plans/Improvements

There are a number of things I would like to add/change to the project in the future, some of which are listed below:

• Increase security by adding various security headers to all responses (CSP for XSS, cross-origin embedder and frame policies for clickjacking, etc.)
  • Use latest CSP script-src directive to allow inline scripts to be executed using a nonce.
• Setup a CI/CD pipeline which builds and tests the project on every push, and deploys the project to the server on every merge to master.
• Use Redux to manage state on the frontend instead of React's Context API.
  • And Redux-Saga for async requests.
• Aggregate logs from the server and client so they can be viewed and indexed in a single place (e.g. Kibana).
• Setup "forgot password" functionality to allow users to reset their password by receiving a reset token/link via email.
• Look into converting the backend (and maybe frontend) to TypeScript (again).

Running the Project Locally

To run the project locally, you will need to have Node.js and NPM installed. You will also need to have a MongoDB instance running locally. Once you have those installed, you'll need to create a .env file in the root directory and set the following environment variables:

PORT={port to run the server on}
HOST={host to run the server on}
MONGO_URL={url to connect to MongoDB instance}
NODE_ENV={environment (development, production, etc.)}
SESSION_SECRET={secret used to sign session cookies}

You should then be able to run the following commands to start the server and client:

Start the server and client using concurrently

npm run start

Build and serve the client

cd client
npx webpack build
npx serve -s dist

lawrences.tech's Issues

Word Predictor Improvements

Some improvements which could be made to the word prediction page:

• Display word predictions using a kind of heat-map display, where colour shows the probability of the word, based on the number returned by the tipofyourtongue api.
• Have a "How this works" expand tab at the bottom, or a link, that explains the technical details and has a link to the code.

Center All Images in Articles.

Currently images in the rendered articles aren't centered.
Update the renderer used to center the image.

import ReactMarkdown from 'react-markdown';

const markdown = `![kingqueen](https://miro.medium.com/v2/resize:fit:1060/format:webp/1*LdviucnshWgIIcQvhTTF-g.png)`;

const renderers = {
    image: image => (
        <div style={{ textAlign: 'center' }}>
            <img src={image.src} alt={image.alt} style={{ maxWidth: '100%' }} />
        </div>
    ),
};

function MarkdownArticle() {
    return <ReactMarkdown components={renderers}>{markdown}</ReactMarkdown>;
}

CI/CD implementation

Implement CI/CD.

The flow should be as follows:

• If a push or merge happens on master.
• Download and cache relevant packages.
• Build the app.
• Wait for Authorization to continue.
• Copy the build to the EC2 instance
• Restart NGINX

Default profile picture logo not displaying.

When creating a local account (not through OAuth) the default profile picture place-holder isn't being displayed correctly.

Add Lorenz Attractor to Projects Page

Add a new tab to the projects page which links to the Lorenz Attractor project.

"Projects" page not working.

The "Projects" page (/projects) is throwing a 404. It should instead display a list of cards for each project, with an image, name and short description, which can be clicked on to navigate to that projects page.

"About" page not working.

The "About" page (/about) is throwing a 404. This should instead display some basic information about myself and include relevant links.