Table of contents

• Overview

• Projects

  • 1-First React Site
  • 2-Digital Business Card
  • 3-AirBnb Clone App
  • 4-Travel Journal App
  • 5-Meme Generator App
  • 6-Notes App
  • 7-Tenzies App
  • 8-Quiz App

  Overview

  Completed these projects that are parts of Scrimba's React Basics Course. I learned fundamentals of React in these projects. You can see the visual representations of the each app below.

  Projects

  1-First React Site

  Visualization of the app;

  

  Description

  I created a first static webpage with react.

  2-Digital Business Card : Live Link

  Visualization of the app;

  

  Description

  I created a static solo project called as digital business card with three components.

  • Header component consists of;
    • An image,
    • Name & job title
    • Action buttons
  • Main component consists of;
    • About & interests contents
  • Footer component consists of;
    • Social media icons

  What I Learned?

  • Why React?
  • JSX
  • Custom Components
  • Styling
  • Static pages

  3-AirBnb Clone App

  Visualization of the app;

  

  Description

  I created static page for AirBnb experiences clone app with three components.

  • Navbar component consists of;
    • AirBnb logo,
    • Navbar
  • Hero component consists of;
    • Hero image
    • Hero header & hero text
  • Card component consists of;
    • Card lists including user views

  4-Travel Journal App : Live Link

  Visualization on the Desktop;

  

  Visualization on the Mobile;

  

  Description

  I created a static solo project called as travel journal app with two components.

  • Header component consists of;
    • Navbar including logo and site name
  • Places component consists of;
    • Place image
    • Place location when clicked "View on Google Maps"
    • Travel date
    • Place description
  • Footer component

  What I Learned?

  • Props in React
  • Mapping data
  • && operator as short way of if statement

  5-Meme Generator App : Live Link

  Visualization on the App;

  

  Description

  I created first interactive React project called as Meme Generator. The app features include;

  • User can get random image by clicking button
  • User can adjust top/bottom texts on the image when typing
  • The app uses an Image API on https://api.imgflip.com/get_memes

  What I Learned?

  • Event listeners
  • States
  • Conditional rendering
  • React forms
  • Side effects and useEffect() hook also cleanup function

  6-Notes App : Live Link

  Visualization on the App;

  

  Description

  I created second React project called as Note App. The app features include;

  • User can create new note
  • User can edit notes on mardown editor also see preview
  • Delete notes on sidebar
  • React libraries such as react-split, react-mde

  7-Tenzies App : Live Link

  Visualization on the App;

  

  Description

  I created interactive game app called as Tenzies. The app features include;

  • User can start new game
  • User can see total number of rolls
  • User can roll dice until all other dices are same
  • If all dices are same, user can win!
  • User can see the previous best score.
  • Local storage to save the previous best score according to all dices are same for example;
    • All dices are 6 then total previous score is 60 or dices are 1 then total previous score is 10 etc.

  What I Learned?

  • .every() method
  • nanoid()
  • react-confetti

  8-Quiz App : Live Link

  Visualization on the App;

  

  Description

  I created interactive quiz app. The app features include;

  • User can start quiz
  • The five questions are listed using The Trivia API
  • Tally correct answers and total score after User clicks "Check answers" button