Welcome

Hi and welcome to version 3 of my Personal Portfolio. Sadly I am unable to share the code that I develop for clients professionally, so I have decided to make my personal portfolio repository public for the very first time.

My reason for doing this is to hopefully inspire/help other developers who are seeking to create something similar.

I am a huge fan of a side project as they help me to keep on top of new technologies, trends and tooling, which is why I wanted my Portfolio to be a little bit more involved than just a simple one pager. This is effectively my best practices sandbox, a place to test new tooling, libraries, frameworks etc. without restriction or fear of breaking something. A good example of this is the recent update to SSR and TypeScript, something I have been wanting to do for a while now. Anyway, enough waffle from me, lets dive into some more detail.

About

Quirksmode is a fully responsive Universal (SSR) React Application designed to connect to a Headless CMS (not included here). It is composed of the following technologies:

• React
• Redux
• Redux Toolkit
• React Router
• Connected React Router
• React Spring
• Webpack
• Node
• Express
• TypeScript
• axios
• react-helmet
• loadable-component
• React Hot Loader
• Webpack Dev Middleware
• Webpack Hot Middleware
• Webpack Hot Server Middleware
• Webpack Bundle Analyzer
• helmet
• ESLint
• StyleLint
• Prettier
• PostCSS
• Workbox
• Jest
• Docker

Key Features

• Universal React App (SSR)
• Redux for state management
• Automated bundling and code splitting with lazy loaded components
• Progressive Web App (Workbox)
• Hot Reloading
• Functional Components with Hooks
• Follows BEM methodology
• Pages and Components are grouped into namespaced folders/files

Requirements

• node == 12.15.0
• npm >= 6.0

Prerequisites

• Clone the repo

  git clone https://github.com/Quirksmode/quirksmode-v3-ui.git
  cd quirksmode-v3-ui

• (Optional) Install Docker

How to run without Docker

Run Development build (with Hot Reload)

make watch

Run Production build

make build

How to run with Docker

docker-compose up

Roadmap

• Update Unit/Integration Tests to TS and improve coverage
• Add E2E Tests
• Improve CI/CD
• Update Readme
• Create custom Static Site Generator