Tag: react

Build Ecommerce Website (Amazon Clone) with Node and React Tutorial

Hello guys, I found a nice 5 hour long YouTube tutorial on how to build a Ecommerce website with Node and React by Coding with Basir.

By the end of the tutorial you will build a mini clone of Amazon using Node and React. This app is a Full Stack MERN App using MongoDB for database, Node + Express for APIs, front end is built with React (using Hooks) with Redux for state management. Finally the app is deployed on Heroku.

Course Contents

  • 00:02:00 Part 01- Introduction
  • 00:08:26 Part 02- Install Tools (VS Code, Chrome)
  • 00:12:36 Part 03- Website Template (HTML, CSS)
  • 00:29:47 Part 04- Products List (Grid, Flexbox)
  • 00:41:54 Part 05- Create Sidebar (JavaScript)
  • 00:52:39 Part 06- Create React App (React)
  • 01:01:09 Part 07- Render Products (JSX)
  • 01:06:30 Part 08- Product Details (React Router)
  • 01:30:53 Part 09- Create Node Server (Node.js)
  • 01:39:52 Part 10- Fetch Server Data (React Hooks)
  • 01:47:55 Part 11- Manage State With Redux (Redux)
  • 02:07:11 Part 12- Add Redux To Details (Redux with Hooks)
  • 02:29:23 Part 13- Shopping Cart Screen (Advanced React)
  • 03:08:11 Part 14- Connect MongoDB (Mongoose)
  • 03:21:35 Part 15- Sign In User (JWT Authentication)
  • 03:56:02 Part 16- Manage Products (React Modal)
  • 04:38:43 Part 17- Checkout Wizard (React Wizard)

Topic Covered

  1. HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
  2. React: Components, Props, Events, Hooks, Router, Axios
  3. Redux: Store, Reducers, Actions
  4. Node & Express: Web API, Body Parser, File Upload, JWT
  5. MongoDB: Mongoose, Aggregation
  6. Development: ESLint, Babel, Git, Github,
  7. Deployment: Heroku

Demo – https://node-react-ecommerce-app.herokuapp.com/

Github – https://github.com/basir/node-react-ecommerce

CORS issue in create-react-app

Did you know malformed API url in create-react-app can cause CORS issue in Google Chrome when getting data from external api via fetch or axios.

I know this a strange issue. It is what i faced when using pixabay api in a create-react-app. I had stored api key in .env file. I made a stupid mistake of adding a semicolon as in case of a variable declaration inside .env file.

cors issue storing environment variables create react app
DO NOT ADD SEMICOLON at the end of environment variable

And i used the api key using REACT_APP_PIXABAY_API_KEY react enviroment variable in a JavaScript template string inside axios. I was getting this CORS error in browser console.

cors issue fetch api to call external api
In this API request, REACT_APP_PIXABAY_API_KEY is wrong and hence URL was malformed

It was really hard to debug the issue. I tried various CORS workarounds as mentioned in official docs including configuring proxy myself and adding http-proxy-middleware.

But still the issue wasn’t solved. I wasted nearly 2 hours on this bug. Finally when i was inspecting the console log, I found a semicolon where it shouldn’t be. It lead to an Aha! moment where i revisited the .env file and fixed the environment variable.

cors error in google chrome due to malformed api url in create react app
CORS Error due to malformed API URL

Finally I got rid of the issue and was able to get the data from the server.

So when using create-react-app, make sure your API url is formed correctly and your environment variables are correct to avoid bugs such as these.

Best Web Development Tutorials on YouTube

Ever since the inception of YouTube, there have been thousands of people who have imparted free education to their followers. Today you can learn to play a guitar, or basics of gardening or speak a new language or get good at Math, all at the comfort of your couch.

Web Development and Software development in general is no different. You can find some of the best instructors on YouTube to learn everything about a programming language, build projects, acquire new skills, improve your code quality etc.

Since there are thousands of hours of content one can simply binge watch, it is most important to focus on only those videos which will help you achieve your goals. Whether you are a student or an employee or a freelancer, the best way to improve your skills and achieve your goals is to build projects. If you are a web developer, I cannot stress this point enough.

Among ocean of resources on YouTube, there is only bucketful of full fledged, project focused web development tutorials. This is because coming up with an idea for a project is hard. A content creator needs to spend considerable amount of time working on the idea, translating the idea into code, polishing the content and finally delivering it as a tutorial.

My blog post aims to make a curated list of best web development tutorials on YouTube. You will end up creating tangible projects at the end of each tutorial which you can showcase in your portfolio.

I aim to keep this list up to date and weed out any outdated tutorials.

HTML and CSS

Components

Full Websites / Landing Pages

Libraries

JavaScript

React

Vue

NodeJS

GraphQL

MERN Stack

PHP

Django

WordPress

I hope you will find this curated list of Best Web Development Tutorials on YouTube very helpful . There are still hundreds of good creators and thousands of awesome tutorials. So I apologize if I have missed any good content creator or any good tutorial. You can always share them in comments.

Keep Coding, Keep Smiling !

PS: If I have helped you and made a difference in your life, considering supporting my blog.

Top Udemy Courses for Web Development

Udemy Courses are one of the best and cheapest way to learn a variety of topics ranging from Web Development, Software Development, Graphics Design, Photography, Music, Finance, Accounting, Self Help, Health and fitness.

Udemy has its sale at various times during a year. But they have longest sale with great discounts during the first week of new year. This year they are offering some great courses for less than $10 up to January 9th.

This blog post aims to list top Udemy Courses for Web Development.

My choice of these courses are based on a combination of concepts + contents + real world projects + course updates + beginner friendliness + value for money. Honestly these are my personal opinion and selecting few courses from an ocean of courses was a real challenge.

Front End

HTML + CSS

Javascript

Typescript

Frameworks

React

Angular

Vue

Back End

NodeJS

GraphQL

Django

PHP

Database

Full Stack

MERN Stack

MEAN Stack

LAMP Stack

Bootcamps

Beginner

Advanced

WordPress Development

I hope you will find these Udemy Courses useful in your web development journey. There are lots of other great instructors and great courses as well. I hope to cover lesser known instructors with great content in future post.

Keep Coding, Keep Smiling !

PS: If I have helped you and made a difference in your life, considering supporting my blog.

Free Online Full Stack Web Development Bootcamps 2020

Hello friends, I’m going to review top Free Online Full Stack Web Development Bootcamps in 2020. I think 2020 is going to be a golden year of free online education with so many resources to kick start your web development journey.

Here is the list of free online web development bootcamps I’ll be covering in this post.

  1. freeCodeCamp
  2. The Odin Project
  3. Full Stack Open
  4. App Academy Open
  5. CS50 Web Programming

freeCodeCamp

freeCodeCamp

freeCodeCamp is one of the top web development resources recommended online especially to the beginners. It’s a non-profit started in the year 2014 by Quincy Larson who aims to provide top quality software education to the students for free. This initiative has helped thousands of students get jobs and earn a decent living.

freeCodeCamp offers you certifications on following topics which are divided into modules.

  • Responsive Web Design
  • JavaScript Algorithms and Data Structures
  • Front End Libraries
  • Data Visualization
  • APIs and Microservices
  • Information Security and Quality Assurance
  • Coding Interview Prep

Each modules takes about 300+ hours to complete and focuses on core topics related to HTML, CSS, JavaScript, Data Structures and Algorithms, Front end tools such as React, Redux, Bootstrap, Sass.

Backend Development is taught using NodeJS and Express and MongoDB for Database technology. So at the end of this you can call yourself an Junior Developer in MERN (Mongo, Express, React and NodeJS) Stack.

The best part what I like about freeCodeCamp is that there are detailed modules focused on improving the quality of code such as Information & Security, Quality Assurance and Testing and Project Oriented learning.

Ultimately if you spend an year on freeCodeCamp and put what you have learnt to practice, you’ll definitely be a better web developer.

The Odin Project

The Odin Project

The Odin Project is one of the top resource since 2013. It was founded by Erik Trautman during his time as an instructor for a web development bootcamp. Main aim of the project was to provide structured learning resources or a path for beginners and learners. Before this, they were lots of resources all over the internet, but no sane way to go through all of them in a structured path.

Today The Odin Project is maintained by volunteers and backed by supporters and sponsors. The best part about The Odin Project is that it provides you a spartan way to learn web development. This means that you have to set up your own development environment, download and install stuff, tinker with command line look around for help. This is as real world as it gets with very less hand holding. Ultimately The Odin Project makes you a better developer who is self reliant.

The curriculum at The Odin Project has 3 tracks or paths

  • Full Stack JavaScript
  • Front End Only
  • Full Stack Ruby on Rails

The tracks start from web development basics (or 101 topics) and also gives you taste of real world stuff such as Text Editors, Command Line, Git. Core topics covered in the tracks are HTML, CSS, JavaScript, Ruby, Front End Frameworks, Backend with NodeJS or Ruby on Rails.

The Odin Project is one among only few free online bootcamps to teach Ruby and Ruby on Rails.

There are plethora of hands on project challenges such as Rock Paper Scissors, Etch-a-sketch, Calculator, Tic Tac Toe, Restaurant Page, ToDo List, Weather App, Battleship, Photo Tagging App, Message Board, Inventory App and finally a Social Network clone.

The Odin Project offers some insights on how to get hired.

As an interesting fact, there are few students who work on freeCodeCamp and The Odin Project side by side. They use FCC for learning theoretical concepts and TOP for practical projects.

App Academy Open

App Academy Open

App Academy Open is a free full stack web development curriculum offered by App Academy, a top coding bootcamp in US. Apart from free track, they also offer Mentorship, live lectures, pair programming, career services which are paid premium services.

I’m gonna discuss here only about the free curriculum.

App Academy Open curriculum consists of Video Lectures + In-Browser Coding. They cover through a vast list of topics which may take over a year to complete.

  • Welcome To Coding
  • Intro to Programming
  • Full Stack Online – Intro to Programming
  • Software Engineering Foundations
  • Ruby
  • SQL
  • Rails
  • JavaScript
  • React
  • Full Stack Project
  • MERN Stack Curriculum
  • Full Stack Online – Job Search
  • Docker Curriculum
  • GraphQL Curriculum
  • Data Structures and Algorithms

Each topics are quite voluminous on their own and there are lots of projects to be completed at the end with detailed guidelines. This program will definitely help you get job ready and your projects will impress a lot of people.

Full Stack Open

Full Stack Open

Full Stack Open is a recent online web development bootcamp collaboration by Houston, a Finnish software company and The University of Helsinki (of Java Mooc.fi fame).

Full Stack Open is aimed for advanced web development learners with a focus on topics such as React, Redux, Node.js, MongoDB and GraphQL. It assumes you have a familiarity with HTML, CSS and Javascript.

The objective is to build single page applications with React that consumes API’s build with Node.

The course is divided into 9 parts on following topics

  1. Fundamentals of Web apps
  2. Introduction to React
  3. Communicating with Server
  4. NodeJS + Express
  5. Testing Express Servers
  6. Testing React Apps + Custom Hooks
  7. State Management with Redux
  8. React Routeer + Styling with CSS + Webpack
  9. GraphQL

Full Stack Open is a very professional course which is frequently updated and aims to make course learners job ready by the end of the course. This online bootcamp needs to be your priority when you have mastered the basics of web development.

CS50’s Web Programming

CS50’s Web Programming with Python and JavaScript

CS50 by legendary David J. Malan of Harvard University is a brand by itself which revolutionized the way Computer Science fundamentals are taught in the classrooms across the world.

CS50’s Web Programming with Python and JavaScript is web development focused curriculum by the makers of CS50 which can be considered as a sequel to the original course.

CS50’s Web Programming with Python and JavaScript deep dives into following topics

  • Git
  • HTML, CSS
  • Flask
  • SQL
  • ORMs, APIs
  • JavaScript
  • Front Ends
  • Django
  • Testing, CI/CD
  • GitHub, Travis CI
  • Scalability
  • Security

Each topic is an hour long video lecture which are followed by project with detailed guidelines. The final project is to build a web application of your choice with Python, JavaScript and SQL.

Just like CS50, this course is also very popular with web development learners. At the end of the course, you will have solid fundamentals and you can gain a fresh perspective on web development.

If you are a newbie starting to learn web development, I highly recommend you make the best use of any or all of the above Free Online Fullstack Web Development Bootcamps. Each bootcamp is unique on its own, just experiment and find out which appeals more to you. The most important part is to build a solid portfolio for yourself and develop your skills to be job ready.

That’s it for this post. Follow my blog for more resources on web development in days to come.

Happy 2020, Happy coding !

PS: If I have helped you and made a difference in your life, considering supporting my blog.