This week I worked on creating a Spotify clone using React, material-ui, React Context APi, React Hooks, User authentication and the Spotify APi to actually gather real users’ data. Note that you will need a Spotify account in order to use the Spotify API functionalities.

To start my project, I ran ‘npm create-react-app spotify-clone’ inside of a new folder. Once the file was created, I opened it with VSCode and worked on cleaning up the code and structure that React gives us.


In part 1 of creating an Amazon clone, I went over how to set up the app, create the header, home page and how to add a product to the basket.

In part 2, I showed how to build the subtotal, remove items to the basket and create the login page.

In this final part, I’m going to describe how to build the checkout page, use Stripe functionality to handle the payments and use the cloud function to process the payments.

The checkout page

In Subtotal.js, we need to tell React to use the history once the button is clicked to remember who…


In part 1 of creating an Amazon clone, I went over how to set up the app, create the header, home page and how to add a product to the basket.

In this blog, I’m gonna go over how to build the subtotal, remove items to the basket and create the login page.

Checkout Component

This component, as shown on the picture above, is composed of 2 main div:


This week, in my journey of practicing React, I decided to create an Amazon Clone. It will be fully functional from the users signing in using their email and password, adding items to the basket, checking their basket, removing items if needed and proceeding to checkout.

I created a few clones this past few weeks using so setting up the app is becoming an habit.

First make a new directory in which the project will be hosted. Run:

npx create-react-app amazon-clone

This will create the structure of the app. Clean up the code by deleting everything inside…


It’s been 16 weeks, 4 months, since I now graduated from Flatiron School Full Stack Software Engineering bootcamp. In 3 months, it will be a year since I decided to take a big step and enroll with Flatiron in order to switch career from the restaurant industry to the coding world.

I have had a lot of ups and downs during these 4 months, but today I got a nice email from a company I applied for on 11/8 letting me know that I successfully passed the online assignments and am now moving on to the next phase! …


This week I created a facebook clone using React and Firebase. It was really nice to actually use React, which was invented by Facebook, to actually clone Facebook. You can see the app here and the GitHub repo here.

In order to use the app, when you visit the website, you will see a login page. I used Google authentication so you will be prompted to log in with your Google account.


This week I decided to start working on a few projects that will be to clone a few famous apps. I started with cloning Tinder, which was a fun project especially because I met my wife on this app 6 years ago when I was working in United States. This app is not fully functional, but you can swipe left and right with the cards, go the chat and send a message.

In this blog, I will go over how to set up the app, the React components to create this app and how to connect and deploy with Firebase…


This week I practiced my knowledge about NodeJS and MongoDB by creating an authentication system. I am going to cover the steps used to do so.

First thing you need to have is Node installed, so go to NodeJS and download it. Then create a folder for your project, open it in VSCode, open your terminal and type:

npm init

This will create a package.json file that will hold all of the packages.

The first package that I installed was express that will handle the routes.

npm install express

Another package was nodemon which is going to restart the server…


This week I’ve been learning a little bit more about Node.js. I’ll cover what I learned and why this is used.

Description

Node.js or Node is an open source and cross-platform runtime environment for executing Javascript code outside of a browser.

Quite often we use Node to build backend services also called API’s(Application Programming Interface). These are the services that power our client applications like a web app running inside of a web browser or a mobile app running on a mobile device. These client apps are simply what the user sees and interact with. …


This week I decided to create a recipe fetching an API from edamam.com.

Set up the app and edamam account

First I created my app using the command ‘npx create-react-app recipe’ that gave me the structure of my app. I deleted everything in app.js in the header tag and replaced it with a simple div tag with a class of ‘app’ and a h1 simply printing ‘hello world’.

Next I went to edamam.com, signed up for Recipe Search API as a developer.

5beberson

French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store