https://github.com/umutplvn/mirror_ai-app
Icon Generator
https://github.com/umutplvn/mirror_ai-app
authentication firebase provider-state-management react state tailwindcss useeffect usestate
Last synced: 3 months ago
JSON representation
Icon Generator
- Host: GitHub
- URL: https://github.com/umutplvn/mirror_ai-app
- Owner: Umutplvn
- Created: 2023-08-03T04:14:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-08T02:00:22.000Z (almost 3 years ago)
- Last Synced: 2025-08-06T20:46:23.247Z (11 months ago)
- Topics: authentication, firebase, provider-state-management, react, state, tailwindcss, useeffect, usestate
- Language: JavaScript
- Homepage: https://mirror-icon-umut.netlify.app/
- Size: 203 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mirror AI App
## Live at: https://mirror-icon-umut.netlify.app/
## Description
Project aims to create a Icon Generator App by using AI.
# Note: Api let us to generate only 100 icon per day.
## Project Skeleton
```
009 - Icon Generator App (folder)
|
|----readme.md
SOLUTION
├── public
│ └── index.html
├── src
│ ├── auth
│ │ └── firebase.js
│ ├── components
│ │ ├── Mirror.js
│ │ └── Navbar.js
│ ├── context
│ │ └── AuthContext.js
│ ├── pages
│ │ ├── Login.js
│ │ ├── Register.js
│ ├── router
│ │ └── Router.js
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
```
## Objective
Build a Icon Generator App using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1 : Create React App using `npx create-react-app movie-app` and install firebase `npm i firebase` / `yarn add firebase`
- Step 2 : Signup `https://firebase.google.com/` and create new app in firebase.
Firebase is a backed application development software that enables developers to develop iOS, Android and Web apps. It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit. It is built on Google’s infrastructure. Firebase offers a number of services, including: analytics,authentication, cloud messaging, realtime database, performance and test lab. Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents.
- Step 3 : Use `https://firebase.google.com/docs/auth/web/start` and create `Authentication` operations.
- Add the Firebase Authentication JS codes in your `firebase.js` file and initialize Firebase Authentication:
```jsx
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Replace the following with your app's Firebase project configuration at project settings part
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
```
- Use this method to `Sign up new users` :
```jsx
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
})
.catch((error) => {
console.log(error);
});
```
- Go to https://console.firebase.google.com => Authentication => sign-in-method => `enable Email/password`
- Use this method to `Sign in existing users` :
```jsx
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
})
.catch((error) => {
console.log(error);
});
```
- Use this method to `Set an authentication state observer and get user data` :
```jsx
import { getAuth, onAuthStateChanged } from "firebase/auth";
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
} else {
// User is signed out
}
});
```
- Go to https://console.firebase.google.com => Authentication => sign-in-method => `enable Google`
- Use this method to `Authenticate Using Google with Popup` :
```jsx
import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
// The signed-in user info.
const user = result.user;
})
.catch((error) => {
// Handle Errors here.
console.log(error);
});
```
- Use this method to `Sign Out` :
```jsx
import { getAuth, signOut } from "firebase/auth";
signOut(auth)
.then(() => {
// Sign-out successful.
})
.catch((error) => {
// An error happened.
});
```
- Use this method to `Send a password reset email` :
```jsx
import { getAuth, sendPasswordResetEmail } from "firebase/auth";
sendPasswordResetEmail(auth, email)
.then(() => {
// Password reset email sent!
})
.catch((error) => {
const errorMessage = error.message;
// ..
});
```
- Step 4 : Signup `https://mirror-ai-api-docs.gitbook.io/mirror-ai-api/` and get API key.
- Step 5: You can use css frameworks Tailwindcss.
## Notes
- You can add additional functionalities to your app.
**
☺ Happy Coding ✍
**