My React Solo Project!

Project Requirements:

• React / Redux / React Router
• Reducers, Actions, Action types all split up into their own separate files.
• Fully Mobile responsive.
• Completely styled from start to finish.
• Use 3rd party API, or call data from personal data file. (Must be loaded in from the redux store.)
• Medium article
• Enough components that it makes sense.
• Color swatches for the design of your website. Go to https://www.canva.com/colors/color-palette-generator/ for inspiration for your design.
• Create a 404 not found error component that renders whenever the user enters or navigates to something that is not a correct route or error.

The Idea Behind the Design

The whole idea started for this website through my girlfriend. My lovely girlfriend Jessica paints incredible pictures. She has never really had an outlet to put her paintings out there for the world to see, so I decided to create her a website. I wanted the design to be super simplistic, but still show some website design capability. The end-result came out looking much better than I had initially anticipated.

Project Time-frame:

• Start: Friday, June 4th, 2021.
• Finish and Present: Friday, June 11th, 2021.

Original Planning

The original planning for the website was done on Draw.io. I went into Draw with a simple idea in mind, and laid it all out in easy to read diagrams, so I could reference them as I built the website with my design in mind.

Landing Page Initial Idea

Shop Page Initial Idea

Single Product Page Initial Idea

Shopping Cart Initial Idea

Screenshots!

Landing Page

Shopping Page

Individual Product Page

Shopping Cart Page

Custom Error Page

Technology Stack:

• HTML, CSS, JS(JSX with React)
• React Bootstrap
• React Redux
• React Router
• Toastify

NPM Packages:

• bootstrap”: “⁵.0.1”,
• “react”: “¹⁷.0.2”,
• “react-bootstrap”: “¹.6.1”,
• “react-dom”: “¹⁷.0.2”,
• “react-redux”: “⁷.2.4”,
• “react-router”: “⁵.2.0”,
• “react-router-dom”: “⁵.2.0”,
• “react-scripts”: “4.0.3”,
• “react-toastify”: “⁷.0.4”,
• “redux”: “⁴.1.0”,
• “redux-logger”: “³.0.6”,
• “styled-components”: “⁵.3.0”,
• “web-vitals”: “¹.0.1”

Biggest Takeaways:

Some of the biggest takeaways that I had from this website were as follows: Websites take a LOT of design. Sitting on my own, and completing just the front-end design of a somewhat functional website, really truly makes me understand how much work goes into a website behind the scenes. Having such short time-frames on our somewhat in-depth projects, leaves little room for error, and a lot of room for self-disappointment. I always set a certain standard whenever I feel like I should be performing a certain way, but then I remember how much work ACTUALLY goes into deploying real websites. Once that reality hits me, I feel a little bit better about the work that I’ve created in a little less than a week’s time. I also learned a lot about design, got a bit more comfortable with React and Redux, utilized Toastify (which was surprisingly easy), and became especially familiar with media queries.

Future Additions:

1. I’d like to add a little bit more styling to the front page, and add a little bit more information to really make it pop.
2. Ideally, I’d like to clean up the shop page just a little bit, and maybe add a flip effect to each card, which then shows the details about the cards.
3. I’d also like for the cart to be a modal (which is when another little screen pops up with the screen before in the background), which pops up over the current screen and displays your cart.
4. I plan on adding a back-end to this project, user authentication, and adding Swipe in the future so people can actually purchase paintings when the time comes.