https://github.com/cal-dev-lab/premvw-reactjs
React app for an automotive brand.
https://github.com/cal-dev-lab/premvw-reactjs
Last synced: 9 months ago
JSON representation
React app for an automotive brand.
- Host: GitHub
- URL: https://github.com/cal-dev-lab/premvw-reactjs
- Owner: cal-dev-lab
- Created: 2021-07-23T21:34:53.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-03-18T14:37:20.000Z (over 4 years ago)
- Last Synced: 2025-03-26T03:11:23.559Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://gracious-brown-d64858.netlify.app/
- Size: 37.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Premium Volkswagen
This was built with ReactJS and TailwindCSS.
## The brief
Bluesky Interactive had set me a design task to build a new single web page for a car brand called "Premium Volkswagen".
The web page had to include, but not limited to:
- Navigation bar
- Main image
- A way for customers to register their interest (form, call to action, etc)
- Footer
## The approach
When given the task, my first thought was to use ReactJS and TailwindCSS. Why? Being able to create re-usable components makes it easier to add multiple versions throughout the website instead of having to write the same code again thus improving workflow.
I have added a couple of extras into the web app. This includes:
- Image gallery
- Specifications
- Price plan
Using TailwindCSS made it easier to create grids and grid columns which made for a clean layout on all screen sizes and break points.
I kept with a consistent colour scheme using blues. The one occasion where I didn't use blue was for the Toastify notification and form button before hovering. I used green to show that an action has been performed successfully.
The app uses a sans-serif typeface which gives a professional and modern feel. If I was to use a serif typeface, the branding wouldn't appear to match the product.
During the build I have managed to use:
- Toastify
- Emailjs
- Hero Icons
Using Emailsjs allowed me to send form data to an email address which provided the customers name and customers email. This would go direct to the dealer/brand's email address allowing them to get in touch with the customer.
Toastify was then used to show the user a success notification that pops up green indicating the form data was sent successfully.
Please view the image to see what the email comes through as from the web form:
https://snipboard.io/LoGF89.jpg
## What I would do differently next time
Given more time I would like to add data validation to the form and to make the image gallery a pop up so you can view the images full screen. I would most likely use a different typeface such as Px Grotesk which I believe would add an even more "techy" aesthetic.
Another thought would be to use different Toastify notifications such as an error notification indicating to the user the form was not sent due to any technical problems or the form didn't meet the requirements of the data validation.
I would like to change the nav bar to be transparent on top of the main image then once the nav bar gets to the bottom of the image, the nav bar would change to a solid fill colour.
I did install GSAP to do animations with text and images. This is something I will continue to work on.
## Take away
Doing this exercise allowed me to get even more understanding of flex and grid. Also furthered my responsive design knowledge.
I am happy with my comments in the code declaring what part of the code is what. This is also good practice as it will be clear for other developers to read through my code and understand what is going on.
Furthermore, working collaboratively this will increase workflow and efficiency in a team as there will be no head scratching trying to figure out what is what.
# Thank you!
c-l.dev