Helena Charis Online Store

Demo: https://hcharis-store.herokuapp.com/

Concept:

Fully functional and interactive, this web application allows users to see a list of products, see details about each product, add them to the cart, increment the number of items and buy the products utilizing Stripe API. The products are separated by category displayed in the main menu. Users can then choose specific products or click on the shop section to visualize the entire list of products. Furthermore, from a technical point of view, this project aims to utilize a state management tool, Redux, to better serve the application components. For authentication, this project uses Firebase.

Technologies Used:

• React

• Redux

• GraphQl

• FireBase

• Node

• JS

• SCSS

• Stripe

• Style Components

• React Slideshow

• FontAwesome

• Cloudinary

• Heroku

• Adobe Illustrator

• Images retrieved from Unsplash, unDraw, and internet in general.

Approach:

The main idea was an Online department store retail app that provides users with a variety of products for men, woman, children, and house decor. An immersive experience, where we allow the user to select specific product by category, view the product and add to the cart, preview the items in the cart and move to the checkout,where the can remove and increment the number of items before purchase. Finally, the user can use a fake credit card provided by stipe to complete the transaction.

I am a super visual person, so I like to start my projects by designing the application wireframe on my draw handbook with a pencil, nothing too fancy but for a visual person like me it makes a whole lot of difference, I feel like I have a goal to meet, like when I am doing a mockup of some website, the design is layout for me I just need to follow the patterns.

I normally, use canva.com to translate my drawings from paper to a more visual approach, canva is also the place where I start to brainstorm the name and logo of the application.

Thinking about some minors details brings a lot of character to my projects, like meaningful name or a logo, or changing the icon on the cursor when the user approaches a certain area of my application, this particular character can be seen throughout the entire application (like an easter egg, except I am the only one who knows about it 😂).

Furthermore, in this case specifically, I just had a new bourn so it was easy what the name of my app would be, after that I just create the Helena Charis store and the h-Charis logo.

Following the design phase, I have a pretty good idea of what my components structure will look like. Since react is a unidirectional data flow methodology it is important to understand which components will hold state or if I should incorporate a state management tool like redux or simple enough, context API.

Finally, it is code time!

Challenges:

Bringing a new technology onboard is always a challenge, at this time was not particularly easy to grasp my head around Redux at first. However, I just practice over and over, following the basic concepts and reading a lot of redux docs.

Also, I learned a lot about middlewares like the logger and how awesome it is to see the previous and current state displaying in the console. Finally, separating my Redux environment with each section of my application in its own folder and files. For example:

Having a main root-reducer and store in the same directory makes it easy for me to understand what each one of them does and how to manage my state.

Demo: https://h-charis.netlify.app/