Final Release

Summary of Project

I created a replacement website for Five Peaks Accounting. It functions very similarly to the existing page however I have addressed some of the things I did not like about the existing page found at 'https://www.fivepeaks.co.nz/'

I also used a website development framework called ReactJS which makes aspects of the website significantly faster than If I used vanilla JavaScript. I utilised React to make the website a single page application which means that upon load of the website It pre-loads every single page so when switching between pages It happens instantly rather than redirecting to another page it changes the page using the users individual hardware which is significantly faster / instant.

End User

My end users are business owners ( 20 - 60 year olds ) looking for someone to help manage or discuss finances. This somewhat specific end user helped me with designing the user experience with the fact that they are looking for a clean and professional website to help portray professionalism and trust in the accounting firm. This led me to use secure & professional colours cyan, white and charcoal grey, I could have incorporated more colours in the site as there is lime in the logo but decided to go with simplicity as it conveys professionalism.

Key Features

• Navigation Bar
  • Instant switching between pages
  • hover in & out animation transitions
• Contact Component
  • SVG icons
  • google maps API integration
  • links to more information
• Footer Page
  • SVG components inside CSS grid
  • Social media links
  • Integrated navigation bar
• Home Page
  • Buttons that link to the functions called in the navigation bar
  • radial images inside flex
• Inquiry Page
  • Form integration with "Emailjs" to allow user to send inquiry's through a on page form
  • resizable text input
• About Page
  • text inside CSS grid
• Services Page
  • first useful and necessary use of react props and components
  • overlay container that displays when the information link is clicked that can be closed by clicking again
• Pricing Page
  • simple horizontally centered text div
• Contact Page
  • only shows the contact and the footer
• File Structure
  • I ensured all the files in the project were in an appropriate folder That way if the project were to get bigger it would be easy to find things.
  • I used the file structure I picked up on when learning ReactJS which is to have all your seperated pieces of jsx in a '/Components' Folder and I also added my own '/Images' & '/Font' folders

Video Recording

Youtube Link

Burn-down Charts / time management tools

First Sprint

Second Sprint

Third Sprint

Why I used Miro as opposed to a burn-down chart generator?

I used manually made my charts in Miro because Miro was the tool I used for all my previous planning and I wanted to simplify and minimize the amount of planning tools I was using to not only help me focus on writing code rather than switching between multiple planning services, it was also better because when I was on my Miro board referring back to previous wire-frames I'd see the burn-down chart and It would be a constant reminder to keep it updated at the end of each session.

Relevant Implications

Legal

The five peaks current website was built using a website hosting tool and its monthly subscription also puts a lot of power in the hands of this website building tool as if they increased their monthly subscription rate there is little to nothing that Five Peaks can do as they hold the rights to the domain and the website itself.

I also ensured all photos used were either my photographs or from pixabay which is free for commercial & non commercial "Pixabay contents are free to use for commercial and non-commercial purposes. "

Aesthetic

The aesthetics were a big part of the design process of the website and it influenced a lot of my CSS styling decisions. Such as using CSS variables on things that I wanted to stay the same such as border radius which smoothed edges to all either be the var(--Radius) and I ensured I had a primary color to signify points of the webpage such as buttons & hover effects.

I consciously didn't use black as it is not only a very contrasting colour that is seen in almost every website but it also causes eye strain and I found the site much more relaxing to read when it was an off-shade of black.
The white in the site is to balance the colours out and give users space so their eyes can focus on the more important colours and their content.
cyan was used for buttons and important things as colour is better utilised for marking things to interact with.

Sustainability and Future Proofing

To ensure the website was future proofed I not only setup the folder structure so it was easy to replace & locate files but I ensured in the package.json file that most of my external packages such as mail-JS and react-JS had the "^2.1.4" which means “Compatible with version”, will update you to all future minor/patch versions, without incrementing the major version. ^2.3.4 will use releases from 2.3.4 to <3.0.0. Meaning that when the frameworks I am utilizing get minor/patch updates It will install them automatically which generally improves performance or security of those specific frameworks.

Accessibility

Testing

For testing I ensured I was using reactJS which automatically pops up errors on the terminal hence why I only need to validate my CSS and "expected boundary " validation

CSS Validation

Expected Boundary Testing

Second Release

SECOND RELEASE

since the last release I have worked on polishing the little pieces and have also added 2 pages; Enquiry and the About page

I am beginning to notice that react doesn't like it when I change the state of an object with the object that is being changed i.e a link to the about page inside the home page when the homepages content would be replaced if you pressed the button. I will try to use vanilla JS to access the id's of the buttons and use that to change the state instead of the easier on click parameter inside JSX / HTML

Contact Tile

(old tile)

(development)

(new tile)

Home Page

(old page)

(new page)

Enquiry Page

About Page

Little Things
development

added a title and a fav-icon to the page

re-positioned the grid and elements to make it look like the wire-frame

TESTING
same as the first release, I had used the following extensions on VScode to improve productivity and auto highlight invalid input or non formatted code in the editor.

I had to reconfigure Emmet to allow it to add snippets for JSX / JavaScript react

(in react js it uses class(functions with objects) along side class(css class) and we are supposed to use 'className=...' instead of 'class=...')

Added className= instead of class=

Added htmlFor= instead of for=

every error fixed.

RELEVANT IMPLICATIONS

• Accessibility
  The website has become more accessible because I have included alt tags to all images which makes text appear when an image is not loaded, alt text is also used when text to speech is enabled.

• End-User-Requirements
  I have addressed end user requirements by implementing an inquiry page allowing possible customers to get in contact

• Aesthetics
  I have heavily focused on aesthetics by going through multiple stages of development when implementing new components, testing out what looks better in the wireframes on miro and then transfering the better style to the active webpage.

First Release

Navigation Bar

added a navigation bar which utilities react state to control the page content without refreshing the Dom which results in a longer initial load time yet instant page switching which only de-renders the middle chunk of the website and replaces it with the corresponding 'active page' which means it is somewhat optimized and added hover animations.

Carousel

added a carousel on the homepage which adds more div's to the right using their corresponding image, however I am not happy with the carousel as it does not add the images in the folder automatically which is the next step, it loads all of the images on page load which is highly optimized and I'd like to load and unload images coming up and leaving to optimize the page, I'd also like some kind of parallax SVG overlay that follows the cursor and the tiles to go the direction of the cursor.

Service Tiles

Added 3 tiles in a flex box to show the different services and support the company offers, I still don't like the design and would like some kind of image background in theme with the logo.

Contact Tile

Added a contact tile as part of the footer which will be displayed at the bottom of every page on the website as contact is the end user requirement. The overall design of the contact tile is good, I would probably change the background up a bit to make the text on the left more readable.

Footer

The footer looks really good and id like to keep it the way it is, maybe change up the text color, make the social media links work and add a hover animation but other than that it is fine as it.

Testing

I tested the layout of the footer and ended up deciding on the layout that had the best contrast and readability.

Validation

To ensure the code is valid I have been using a live react compiler which gives appropriate error warnings when there are major errors in the code and typos, I will be using a expected, boundary, invalid table once everything about the website's layout is complete which is likely going to be my final release.

Relevant Implications

Aesthetics
I have ensured the aesthetics of the website are consistent and in theme with the logo & branding. And ensured the font was consistent, I will for the next release

Legal & Privacy
The website avoids copyright issues by only using images that have been taken by me, and text content has also been written by me. The website itself has been developed with the use of react JS which is an open source web framework, and the logo is featured prominently in the footer of the website.

Health & Safety
Although this may seem insignificant I have actually purposely used colors that don't contrast as hard ie: using and off-shade white and a dark grey instead of black to reduce eye strain.