README.md

April 23, 2023 · View on GitHub

Overview
Projects
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