Some of the details listed here are not yet implemented are are planned to be at a later date (such as testing, redux and an accessability audit.)
This is the git repo for the frontend of my personal portfolio, if you have any questions, queries or feedback, please email me at contact@cameronthornton.dev.
This project was designed as a way for me to display my personal work as a colletion of projects, as well as host a place for me to leave my thoughts in the form of blogs. The projects and blogs are hosted on an external API I built, this API can also be found on my GitHub page and is required until I get around to hosting it.
-
The requirements for running this application locally are the same as any standard
create-react-appreact application, of course with additional dependancies provided by npm. The currently supported browsers are Firefox and Chrome. -
Once this repository is cloned, dependencies must be met through:
npm i
A local development server can then be spun up through
npm start
WARNING This project is currently a Work In Progress. It is not in a finished state and for now will also require the use of my API to be ran in the background. Instructions for this can be found in the
READMEof that project. -
-
Functional components are used where possible due to their reduced compile size and the phasing out of class-components by the react development team. The project also tries to follow an atomic component structure. The basic idea being to split components into organisms, molecules and atoms. organisms being made of many molecules, and molecules being made of many atoms.
-
App-wide state management will be done through Redux. The structure of which is as follows:
"items": { "projects": "Project[]", "blogs": "Blog[]" }
These items are what should be returned from the API and what will be rendered to the webpage.
-
This project uses TypeScript. A collection of interfaces used can be found in
interfaces.ts. Though the complexity of this project is rather shallow, all objects and functions should ideally follow basic Typescript principles. -
Accessibility for this project should be kept to at least a AA standard (In compliance with the W3C Web Content Accessibility Guidelines) as best as posssible. aXe-react will be been installed as a means of complying with these standards.
-
Husky pre-commit hooks will be used to ensure breaking or poor-quality code is not commited to the git repo. The pre-commit hook script will be found in
.husky/_/pre-commit. This script will run the cypress tests as well as linting all js files. -
The styling of this project is done through the use of styled-components. This is a third-party library with the aim of blurring the line between react components and SCSS styling. This was done simply as a way of learning a new framework, the file management of these styles within the project needs some work however.
-
-
This project will use Cypress for it's testing. Cypress was chosen as it's what's most familiar and better reflects a user journey through an application.
Tests will be found in
/cypress/integration. Elements should be selected using data-name attributes. This is the apporach recommended by Cypress as it's least intrusive to the DOM.To run the test suite enter:
npm test