Fullstack webapp deployed on https://www.stellar-blog.com
It's a blog style social media webapp built with Next.js & GraphQL on AWS.
Preview of stellar-blog.com ⭐
Overview diagram of the whole system ⭐
- HTML 5, CSS 3, Javascript (ES6)
- Next.js (React.js)
- Styled Components
- Node.js (v12)
- Express.js
- GraphQL
- Jest
- Enzyme
- @testing-library
- AWS Amplify
- AWS Appsync
- AWS DynamoDB
- AWS S3
- AWS Congnito
- AWS Lambda
- AWS Route 53
- AWS CloudFront
- AWS ElasticSearch
Generated fully working APIs from GraphQL schema
- Let user submit their post
- Let user add hashtags on their post
- Let user see a list of all posts others uploaded
- Let user see a list of posts the user uploaded
- Let user see a list of options for settings
- Let user delete their post
- Let user edit their post (WIP)
- Let user follow other bloggers (WIP)
- Let user like other posts (WIP)
- Let user comment on a post (WIP)
- Let user sign up with their email
- Let user log in with their username
- Let user log out
- Verify user by email
- Let user change their password (WIP)
- Let user delete their account (WIP)
- Redirect unauthenticated users (WIP)
Implemented a draggable & droppable UI for better user experience
- Let user upload up to 3 photos at once
- Let user drag and drop their photos
- Let user search a photo with their local OS
- Store user-uploaded photos on AWS S3
- Convert to Webp and resize to fit the window (WIP)
Preview of Photo upload flow ⭐
Sequence diagram ⭐
Implemented an auto-suggestion system with a Trie structure for faster performance and better user experience.
- Let user search posts by hashtag
- Let user see a list of auto-suggestions
Preview of Search flow ⭐
Sequence diagram (Auto-suggestion flow) ⭐
Implemented multi-environments; Master/QA/Prod, and had each domain SSL certified by AWS Certificate Manager to enable HTTPS
- Deployed Master branch to https://dev.stellar-blog.com
- Deployed QA branch to https://qa.stellar-blog.com
- Deployed Prod branch to https://www.stellar-blog.com
Overview diagram of CI/CD pipeline ⭐
Lighthouse performance score (Home page) 💯
Lighthouse best practices score (Home page) 💯
Resized media files to the actual size that users see and then converted to Webp format. ⭐
- Original background image format : jpg
- Original background image size : 492 kb
- Converted background image format : webp
- Converted background image size : 63 kb (88% 🔻)
Pre-loaded google fonts and the background image for shorter loading time. ⭐
- Background loading time before pre-loading : 877ms
- Background loading time after pre-loading : 153ms (5 times faster loading 🚀)
Debounced search input by 500 ms ⭐
Cached static files on the client side ⭐
- TTL : 600 seconds
- Cached on CDN
Cached user-uploaded images on the client side ⭐
- TTL : 31536000 seconds
- Cached on local memory
Cached GraphQL queries on the server side (AppSync) ⭐
- TTL : 60 seconds
- Cached on an EC2 instance with 1.5GB RAM
- Ave. GraphQL query response on Dashboard before cache : 544ms
- Ave. GraphQL query response on Dashboard after cache : 374ms (30% 🔻)
- Cache top search keywords on both client and server sides
- Infinite loading functionality on the dashboard page
- Pre-render blurred images
- Support desktop viewport (window width greater than 600px)
- Support mobile viewport (window width less than 600px)
- Support Chrome
- Support Firefox
- Support Safari
- Support Edge
- Set up a testing environment with Jest (WIP)
- Let user sign up
- Let user log in
- Let user browse through nav menus (WIP)
- Let user upload a photo (WIP)
- Let user add hashtags
- Let user submit a post
- Let user search posts by hashtags
- Let user browse a list of auto-suggestions (WIP)
- Redirect based on user's location (WIP)
- Support English
- Support Korean (WIP)
- Refactor by Typescript
- Format with ESLint, Airbnb Style Guide, and Prettier
Jong-Ho (James) Kim
- Github - Github page
- Linkedin - Linkedin page
- Medium - Medium blog
- april9288@gmail.com