Blog style Social Media webapp built with Next.js & GraphQL on AWS

Blog style Social Media webapp built with Next.js & GraphQL on AWS

Fullstack webapp deployed on https://www.stellar-blog.com .It's a blog style social media webapp built with Next.js & GraphQL on AWS.

stellar-blog.com

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

Development tools

Front-end

  • HTML 5, CSS 3, Javascript (ES6)
  • Next.js (React.js)
  • Styled Components

Back-end

  • Node.js (v12)
  • Express.js
  • GraphQL

Unit-test

  • Jest
  • Enzyme
  • @testing-library

AWS services

  • AWS Amplify
  • AWS Appsync
  • AWS DynamoDB
  • AWS S3
  • AWS Congnito
  • AWS Lambda
  • AWS Route 53
  • AWs CloudFront
  • AWS ElasticSearch

Core features

Integrated with GraphQL and Rest API

Generated fully working APIs from GraphQL schema

Blog system

  • 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)

Authentication flow built with AWS Cognito

  • let user sign up with their email
  • verify user by email
  • let user log in with their username
  • let user log out
  • let user change their password (WIP)
  • let user delete their account (WIP)
  • redirect unauthenticated users (WIP)

Photo upload flow

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 formats to webp and resize to fit the window with AWS Lambda (WIP)

Search flow by hashtag

Implemented an auto-suggestion system with a Trie strucutre for faster performance and better user experience.

  • let user search posts by hashtag
  • let user see a list of auto-suggestions

CICD flow built with Amplify & Github

Implemented multi-environments; Master/QA/Prod, and had each domain SSL certified by AWS Certificate Manager to enable HTTPS

Performance optimization

  • image rendering with a loader

Mobile viewport support

  • support desktop viewport (window width greater than 600px)
  • support mobile viewport (window width less than 600px)

Browser compaitibility

  • support Chrome
  • support Firefox
  • support Safari
  • support Edge

Unit-test result

  • set up a testing environment with Jest (WIP)

Web accessbility (with Keyboard)

  • 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)

Internationalization

  • redirect based on user's location (WIP)
  • support English
  • support Korean (WIP)

To-do list

  • refactor with Typescript
  • format the code with ESLint, Airbnb Style Guide, and Prettier

Meta Data

Jong-Ho (James) Kim

Download Details:

Author: Stellar-blog

Demo: https://www.stellar-blog.com/

Source Code: https://github.com/Stellar-blog/stellar-blog-webapp

react reactjs nextjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

NextJS + FeathersJS = Perfect Javascript Full-Stack

NextFeathers .nextJS + feathersJS = Perfect Javascript Full-Stack! NextJS is the React Framework for a lot of things:

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.