• Live Site
• Project Board
• Technologies Used
• Issues / Future Improvements
• Screenshots
• Installation

Live Site Here

Check out the project board I used for this project here.

I really like using GitHub Projects for keeping track of progress. The built in automation is awesome!

• React
• Gatsby
• SASS/SCSS
• GitHub
• Netlify

I chose to use Gatsby as my framework for this project. Using Gatsby is definitely overkill for the size of this project, but entertaining the idea that this site is real and will be built out further, Gatsby is a great choice. Using Gatsby allowed me to get rolling on the project quickly by making it easy to get started with a base project and React. Not only is it easy to get going with Gatsby, but I am able to take advantage of Gatsby's build in page loading optimization and other features, as well as the ability to easily implement a blog or payment processing. This sets this project up to be scaled if we chose to continue building out Bob's Site.

React was also a bit of overkill, I could have easily have completed this site with vanilla JS and CSS, but using React allowed me to keep my code more organized and speed up my development times.

SCSS is also a very handy tool to me. The features built in to SCSS allowed me to target and manipulate elements more easily. Saving me some time. In the future if this site gains complexity we could add mixins and other things to alleviate repeated styles.

Global CSS vars are nice to use to make commonly occurring styles easy to access and update. I commonly use CSS vars to store variables relating to spacing, color, typography, and etc.

I chose to host Bob's Store on Netlify, primarily because of the ease of deployment and built in features. I find it very useful being able to see a "deploy preview" on a branch before code is merged.

• When data is being fetched loading indicators should be displayed to the user.
• There is a lot more data that we can display about our products from search results. It would be a great improvement to display some of this additional data.
• When there is an error displaying a remote image either display a placeholder or no image.
• Pagination could use improvement. When there are many pages of results it would be better to only show pages within a specified range of the current page.
• Snapshot Testing
• Unit Testing
• Configure TravisCI to handle CI/CD after we have some tests.

• You have git installed globally
• You have gatsby-cli installed globally
• You have node installed globally
• You have nvm installed globally

1. First clone the repository to your local machine

1. Change to project directory

1. Ensure you are using the projects specified version of Node

1. Install Dependencies

1. Start the development server!

1. Bobs Store can now be accessed at