01 - Monster Rolodex

This is the introduction project for react. Only used basics of React, nothing so special. On the other hand it's helpfull to understand how components works and how to split component. It's good practice to understand how states effect to components. When is the time components re-render. Also this project shows that React is very much better than vanilla Js when topic is seperate every thing from each other.

Main goal is:

• Understand how components works
• Learn render logic
• Use seperate components together

02 - Pokedex

This is another simple React Project. In this project I used file structure that I follow, also in css part I used Sass and try to implement BEM approach for that part. I used 3 different components. And this application for a small game actully that plays everytime you reflesh the page. You don't need to do anything.

Components

• Pokegame: In this component we are keeping our state. As this is a simple application I didn't fecth data from another API. There is a array named DATA in this component we are keeping our data in this array. Also we are creating two teams randomly and getting total experience of each team and deciding to winner and passing teams and winner status to Pokedex component.

• Pokedex: In this component we are taking team and winning status as a props and creating Pokecard component to show our Pokemon card. Also we are showing winner and loser in this component.

• Pokecard: In this component we are taking pokemon data with props and showing that pokemon with proper way

Main goal is:

• Practice how to devide project to liitle components.
• Use Sass with component styles.
• Have fun

03 - Github finder

In this project I used couple of things. Before explaining project, all project made with React Hooks. First of all I used Github API for data I recived. Also I used Axios for http requests. My file structure is contains 3 main folder which are pages, context and components also I store my assests in assets folder. In component folder I managed all components. Context folder contains file about state management which I used contextApi. This is a summary of project.

---

Installation

Step 1
If you want to use this project you need to create `env.local` file for API keys in root.

Step 2
Run npm install on your terminal

Main goal is:

• Use React Hooks instead of class components and life cycle methods.
• Use contextApi
• Make real life project

03 - Instaish

In this project I made photo upload site with real time loading. I used Firebase to store images and to use database for keep informaion about those images. In this project I also used Fremer Motion library for animations. I seperated components, firebase files and hooks. Also you need to add your firebase config file to firebase folder, because I hide my Api information.

---

Installation

Step 1
If you want to use this project you need to create `firebaseConfig.js` in firebase folder and you need to add your firebase informations.

Step 2
Run npm install on your terminal

Main goal is:

• Use React Hooks instead of class components and life cycle methods.
• Try Fremer Motion
• Make real life project
• Have fun