It is a shortform trading platform for users who want to buy or resell the sneakers at a reasonable price. I started this project by participating in 'Shortform Video Service Challenge' where I could collaborate with designers and developers.
-
Description : Since there are video services such as "YouTube Shorts" or "Tiktok" that are commonly used, my team decided to clearly determine the service identity rather than having various contents. And my team narrow the scope to the topic of "Second-handed Sneakers Trading", which has a clear fan base and has a strong tendency such as limited edition and resell-tech. We thought this would be perfect service to people who want to see the product condition from various angles.
-
Production Period : 2022.10 - 2022.12
-
Team Members
|
Jungho Kim(leader) Designer |
 Joy Lee Frontend Developer |
 Hyeri Shin Frontend Developer |
 Sungho Joo Backend Developer |
 Choonghwan Kim Backend Developer |
 Jaehee Seo Backend Developer |
You are able to start the app by typing the following commands in the command line:
git clone https://github.com/devjoylee/kicks.git
npm install
npm start
- OAuth Service
- Implemented Google sign-in using Firebase's Authentication provider 📝 Read More in my blog
- Fetched the logged-in user's data (name, profile image..) and saved in sessionStorage to authenticate an user.
// components/Login/GoogleLogin.tsx
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
import { auth } from 'server/firebase';
import * as S from './styles';
export const GoogleLogin = () => {
const navigate = useNavigate();
const login = async () => {
try {
const provider = new GoogleAuthProvider();
const res = await signInWithPopup(auth, provider);
if (res) {
const profile = {
name: res.user.displayName,
photoURL: res.user.photoURL
};
navigate('/');
sessionStorage.setItem('kicks-user', JSON.stringify(profile));
}
} catch (error) {
console.log(error);
}
};
return <S.GoogleButton onClick={login}>...</S.GoogleButton>;
};- Since the server was closed after the project ended, I refactored the server API code by changing the way to fetch data from the firebase database by myself.
- Code Preview
// utils/getVideos.ts
import { collection, ... } from 'firebase/firestore';
import { db } from 'server/firebase';
import { IVideoItem } from 'types';
// fetching video list from firebase database
export const getVideos = async () => {
const q: Query<any> = collection(db, 'videos');
const querySnapshot: QuerySnapshot<IVideoItem> = await getDocs(q);
const docs: QueryDocumentSnapshot<IVideoItem>[] = querySnapshot.docs;
const videos: IVideoItem[] = docs.map(
(doc: QueryDocumentSnapshot<IVideoItem>) => doc.data()
);
return videos;
};
-
Utilized the Swiper React library for the vertical video slider on the main page and the horizontal slider on the search page.
-
Code Preview
// pages/MainPage.tsx
<Swiper direction="vertical">
{videoList?.map(video => (
<SwiperSlide key={video.id}>
<ContentsWrap videoData={video} />
</SwiperSlide>
))}
</Swiper>
-
Automatically create a chat room when you click the speech bubble icon in the main video component.
-
Created two util functions,
dateConverteranddividedByDatein order to make a section of messages by date. -
Code Preview
// utils/dateConverter.tsx
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const dateConverter = (date: Date) => {
const recieved = dayjs(date).format('YYYY-MM-DD');
const today = dayjs(new Date()).format('YYYY-MM-DD');
return recieved === today
? dayjs(date).format('h:mm A')
: dayjs(date).fromNow();
};// utils/dividedByDate.tsx
import { IChat } from 'types';
import dayjs from 'dayjs';
export const dividedByDate = (messages: IChat[]) => {
const sections: { [key: string]: IChat[] } = {};
messages.forEach(message => {
const date = dayjs(message.createAt).format('YYYY. MM. DD');
if (Array.isArray(sections[date])) {
sections[date].unshift(message);
} else {
sections[date] = [message];
}
});
return Object.entries(sections).reverse();
};The commit message is written with the GITMOJI icons in order to make commit messages more intuitive.
| Gitmoji | Meaning |
|---|---|
| 🎉 | Init or begin a project. |
| 🚚 | Move or rename resources |
| ✨ | Introduce new features |
| 💄 | Add the UI and style files |
| ♻️ | Refactor code |
| 📝 | Add or update documentation |
| ➕ | Add a dependency |
| 🐛 | Fix a bug |
| 🚀 | Deploy stuff |
REFERENCE : Gitmoji (http://gitmoji.dev/)