Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yhunlu/postnisin-socialmedia

Fully Responsive Modern Social Media Application
https://github.com/yhunlu/postnisin-socialmedia

fullstack groq headless-cms netlify netlify-cms netlifycms pinterest-clone react react-dom react-google-login react-icons react-loader-spinner react-masonry-css react-router-dom react-scripts sanity sanity-content-studio styled-components uuid

Last synced: 6 days ago
JSON representation

Fully Responsive Modern Social Media Application

Awesome Lists containing this project

README 

        
# Fully Responsive Modern Social Media Application  



The headless CMS social media web application using React, TailwindCSS, Sanity, and React-Masonry-CSS is a web app that allows users to create, share, and interact with various types of content in a dynamic and responsive layout. Some possible features and characteristics of such an app are:



**Check out below video:**



[![headless CMS Social Media App](https://img.youtube.com/vi/5rG6g0fF6AY/0.jpg)](https://www.youtube.com/watch?v=5rG6g0fF6AY)



- **React** is a popular JavaScript library for building user interfaces. It allows developers to create reusable components that can handle state and events. React also supports server-side rendering, which can improve the performance and SEO of the web app.

- **TailwindCSS** is a utility-first CSS framework that provides low-level classes for styling elements. It enables developers to create custom designs without writing any CSS code. TailwindCSS also has a responsive system that allows developers to adjust the layout and appearance of elements based on the screen size.

- **Sanity** is a headless CMS that allows developers to store and manage content in a structured way. It provides a rich editing environment, a powerful query language, and a flexible API. Sanity also integrates well with React and other front-end frameworks.

- **React-Masonry-CSS** is a React component that implements a masonry layout using CSS columns. A masonry layout is a grid-like layout where the elements have different heights and widths, creating a gap-free arrangement. React-Masonry-CSS allows developers to create responsive masonry layouts with minimal configuration.



The web app using React, TailwindCSS, Sanity, and React-Masonry-CSS have the following features and functionalities:



- Users can sign up and log in using their social media accounts, such as Google.

- Users can create and edit their profile.

- Users can create, edit, and delete boards, which are categorized by topics or themes.

- Users can create, edit, and delete pins, which is images that link to external websites or resources. Users can also upload their own images, or use the web app's search feature to find relevant pins from other sources.

- Users can view and interact with pins in a masonry layout, which adapts to the screen size and device orientation. Users can also filter and sort pins.

- Users can comment, like, and share pins with other users. Users can also follow other users or topics, and see their activity in a feed.

- Users can access the web app from any device and browser, as the web app is fully responsive and compatible with different platforms and standards.



Please include file of the following tasks:



#### File: root of application

  .env

  ```shell

  REACT_APP_GOOGLE_API_TOKEN = 97470672xxxxxxxxxxxxxa3t5.apps.googleusercontent.com

  REACT_APP_SANITY_PROJECT_ID = pixxxxf

  REACT_APP_SANITY_STUDIO_TOKEN = skdQxxxxxxWv

  REACT_APP_SANITY_EDITOR_TOKEN = sk3xxxxxxtY7

  ```



##### Note: Replace 'xxxx' with your own.



#### The Note that:

Using these technologies, a web app similar to Pinterest can be created. Pinterest is a social media platform that allows users to discover and save ideas for various topics, such as fashion, travel, food, etc. Users can create boards, which are collections of pins, and follow other users or topics. Pins are visual bookmarks that link to external websites or resources. Users can also comment, like, and share pins with others.