Not a social network, but a social network management system - A tool to manage the grouping of your social connections within the framework of the social brain hypothesis
- Follow/Unfollow other users
- Friend suggestions
- User profile that displays user's posts and account management options
- Search for users
- Feed that displays posts from members of each of your groups and loads posts on an infinite scroll
- Make a post from anywhere in app with modal
- Like/comment on posts
- Landing page explaining the Social Brain Network
- Friend Groupings associated with ranks of Dunbar's theory
- 1-on-1 messaging
- Unread message notifications
- Dark/Light UI mode based on user system preference
- Add throttle/debounce to user search
- Memoize/cache user search results
- Share post functionality
- Public view of individual posts - change upload to all to public
- Save post functionality w/ saved posts display in profile
- Group chat messaging
- A personal journal feature for non-visible posts
- Ad a 'my groups' page that displays all other user groups from which you are a member
- Tailwind
- Headlessui - tailwind library for use with modal (Dialog, Transition)
- Heroicons
- Firebase v.9 - Storage solution from google; NoSQL and image hosting
- Moment - formatting dates
- Formik and Yup for forms and validation
- randomuser.me - API for random user data to assign profile images
- react-dnd - drag and drop library for groups page
- react-select - dropdown menu library for search box with dynamic options
- react-infinite-scroll-hook - Infinite scroll library for posts feed
This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.
It uses the new Just-in-Time Mode for Tailwind CSS.
npm install
npm run dev
npx cypress open
- user_login.spec.js - user can log in and out