I have created a Web App for myself that saves URLs and comments.
The main functions are as follows
- Google Login
- Create/update/delete posts
- Tagging of posts
- Filtering of posts
Here is the tech stack when I created it.
Source code is here: https://github.com/yyokii/MyCuration
Main Directory Structure
It is a normal structure.
.
├── __tests__
├── emulators: Firebase emulator settings
├── functions: Firebase functions
└── src: client main sources
├── components
├── hooks
├── lib
├── pages
├── repository
├── states
├── types
└── utils
Client
- Next.js
- Chakra UI
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
I don’t want to write css, so I use the component library.
A state management library for React
Server
- Vercel
I like it because it is easy to deploy and easy to set up CI/CD.
- Firebase Auth
It is used for Google login.
If we use `signInWithRedirect`, additional changes are required because it does not behave properly in browsers other than chrome.
Best practices for using signInWithRedirect on browsers that block third-party storage access | Firebase
Firebase Auth `getRedirectResult` is always null when I run the app in Safari — Stack Overflow
- Firestore
The following collections are created
userNames collection: list of user names
users collection: storage of user data, postings, and tags
I use emulator for local development. It is also useful for testing.
The rules are managed in a file and tests are described for the main behavior. For more information, see firestoreRules.test.ts.
- Cloud Functions
Small application, so it is managed in the same directory.
Logic that is performed starting from Firestore updates is described.
I hope this will be helpful to someone.
Source code is here: https://github.com/yyokii/MyCuration
