Light

stinger222 / next-space Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 245 KB

Simple social platform built with Next.js 13

Home Page: https://next-space-phi.vercel.app

CSS 3.01% TypeScript 94.39% JavaScript 2.60%

next13 next react tailwindcss typescript prisma prisma-orm react-hook-form axios vercel

next-space's Introduction

What is this app?

This is a practical project that helped me to grasp essential Next.js 13 famework features while building simple social platform with a handful of basic features

Demo

App deployed on Vercel, so you can check it out if you want! (you're probably not...)

Tech Stack

▷ Typescript

▷ Prisma ORM

▷ Tailwind CSS

Next.js 13

Next Auth

To embrace GitHub OAuth2 authorization
React Hook Form

To create forms with necessary logic such as validation and form state management
Axios

For data fetching

Features

Create and delete twitter-like messages on your profile page
Follow users and keep track of what they post
Edit your profile info

Preview (mock data)

User Page (click to expand)

Registered Users (click to expand)

Followed Posts (click to expand)

Development

Clone repo using git clone command
Add .env file in the root directory (look .env.example)
Run npm run dev to start app in development mode

next-space's People

Contributors

Watchers

next-space's Issues

Make user.name required in the prisma schema and add fallback value

Unable to create new account

Turned out currently it is impossible to register new accounts because of mismatch between User Model that next auth prisma adapter expects to see and what actually there

Redesign "edit profile" button

Instead of ugly icon at the corner of the screen it's better to make it appear when user hovers their own avatar
The only problem is how to implement it using tailwind...

Setting avatar url with domain other than github.com breaks the app

Introduce Axios for client-side requests

Add more info to the user profile

Namely: subscribers count, birth date, location, education, hometown

Maybe: "In relationships with id of the user", friends, following

Add Loader component

Handle 404...ish routes

Clicking on "MyProfile" while not logged-in leads to "users/undefined", and instead of return 404 placeholder, it actually tries to load data for user with id "undefined"

Make HTML more semantic

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.