Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin
Created December 20, 2021 19:44
Show Gist options
  • Save adrianhajdin/a53fdfe71225af2f550b853ae983f0d0 to your computer and use it in GitHub Desktop.
Save adrianhajdin/a53fdfe71225af2f550b853ae983f0d0 to your computer and use it in GitHub Desktop.
Build and Deploy a Modern Full Stack Social Media App | FULL COURSE
export const categories = [
{
name: 'cars',
image: 'https://i.pinimg.com/750x/eb/47/44/eb4744eaa3b3ccd89749fa3470e2b0de.jpg',
},
{
name: 'fitness',
image: 'https://i.pinimg.com/236x/25/14/29/251429345940a47490cc3d47dfe0a8eb.jpg',
},
{
name: 'wallpaper',
image: 'https://i.pinimg.com/236x/03/48/b6/0348b65919fcbe1e4f559dc4feb0ee13.jpg',
},
{
name: 'websites',
image: 'https://i.pinimg.com/750x/66/b1/29/66b1296d36598122e6a4c5452b5a7149.jpg',
},
{
name: 'photo',
image: 'https://i.pinimg.com/236x/72/8c/b4/728cb43f48ca762a75da645c121e5c57.jpg',
},
{
name: 'food',
image: 'https://i.pinimg.com/236x/7d/ef/15/7def15ac734837346dac01fad598fc87.jpg',
},
{
name: 'nature',
image: 'https://i.pinimg.com/236x/b9/82/d4/b982d49a1edd984c4faef745fd1f8479.jpg',
},
{
name: 'art',
image: 'https://i.pinimg.com/736x/f4/e5/ba/f4e5ba22311039662dd253be33bf5f0e.jpg',
}, {
name: 'travel',
image: 'https://i.pinimg.com/236x/fa/95/98/fa95986f2c408098531ca7cc78aee3a4.jpg',
},
{
name: 'quotes',
image: 'https://i.pinimg.com/236x/46/7c/17/467c17277badb00b638f8ec4da89a358.jpg',
}, {
name: 'cats',
image: 'https://i.pinimg.com/236x/6c/3c/52/6c3c529e8dadc7cffc4fddedd4caabe1.jpg',
}, {
name: 'dogs',
image: 'https://i.pinimg.com/236x/1b/c8/30/1bc83077e363db1a394bf6a64b071e9f.jpg',
},
{
name: 'other',
image: 'https://i.pinimg.com/236x/2e/63/c8/2e63c82dfd49aca8dccf9de3f57e8588.jpg',
},
];
export const feedQuery = `*[_type == "pin"] | order(_createdAt desc) {
image{
asset->{
url
}
},
_id,
destination,
postedBy->{
_id,
userName,
image
},
save[]{
_key,
postedBy->{
_id,
userName,
image
},
},
} `;
export const pinDetailQuery = (pinId) => {
const query = `*[_type == "pin" && _id == '${pinId}']{
image{
asset->{
url
}
},
_id,
title,
about,
category,
destination,
postedBy->{
_id,
userName,
image
},
save[]{
postedBy->{
_id,
userName,
image
},
},
comments[]{
comment,
_key,
postedBy->{
_id,
userName,
image
},
}
}`;
return query;
};
export const pinDetailMorePinQuery = (pin) => {
const query = `*[_type == "pin" && category == '${pin.category}' && _id != '${pin._id}' ]{
image{
asset->{
url
}
},
_id,
destination,
postedBy->{
_id,
userName,
image
},
save[]{
_key,
postedBy->{
_id,
userName,
image
},
},
}`;
return query;
};
export const searchQuery = (searchTerm) => {
const query = `*[_type == "pin" && title match '${searchTerm}*' || category match '${searchTerm}*' || about match '${searchTerm}*']{
image{
asset->{
url
}
},
_id,
destination,
postedBy->{
_id,
userName,
image
},
save[]{
_key,
postedBy->{
_id,
userName,
image
},
},
}`;
return query;
};
export const userQuery = (userId) => {
const query = `*[_type == "user" && _id == '${userId}']`;
return query;
};
export const userCreatedPinsQuery = (userId) => {
const query = `*[ _type == 'pin' && userId == '${userId}'] | order(_createdAt desc){
image{
asset->{
url
}
},
_id,
destination,
postedBy->{
_id,
userName,
image
},
save[]{
postedBy->{
_id,
userName,
image
},
},
}`;
return query;
};
export const userSavedPinsQuery = (userId) => {
const query = `*[_type == 'pin' && '${userId}' in save[].userId ] | order(_createdAt desc) {
image{
asset->{
url
}
},
_id,
destination,
postedBy->{
_id,
userName,
image
},
save[]{
postedBy->{
_id,
userName,
image
},
},
}`;
return query;
};
import React, { useState, useRef, useEffect } from 'react';
import { HiMenu } from 'react-icons/hi';
import { AiFillCloseCircle } from 'react-icons/ai';
import { Link, Route, Routes } from 'react-router-dom';
import { Sidebar, UserProfile } from '../components';
import Pins from './Pins';
import { userQuery } from '../utils/data';
import { client } from '../client';
import logo from '../assets/logo.png';
import { fetchUser } from '../utils/fetchUser';
const Home = () => {
const [toggleSidebar, setToggleSidebar] = useState(false);
const [user, setUser] = useState(null);
const scrollRef = useRef(null);
const userInfo = fetchUser();
useEffect(() => {
const query = userQuery(userInfo?.googleId);
client.fetch(query)
.then((data) => {
setUser(data[0]);
})
}, []);
useEffect(() => {
scrollRef.current.scrollTo(0, 0)
}, [])
return (
<div className="flex bg-gray-50 md:flex-row flex-col h-screen transaction-height duration-75 ease-out">
<div className="hidden md:flex h-screen flex-initial">
<Sidebar user={user && user} />
</div>
<div className="flex md:hidden flex-row">
<div className="p-2 w-full flex flex-row justify-between items-center shadow-md">
<HiMenu fontSize={40} className="cursor-pointer" onClick={() => setToggleSidebar(true)}/>
<Link to="/">
<img src={logo} alt="logo" className="w-28"/>
</Link>
<Link to={`user-profile/${user?._id}`}>
<img src={user?.image} alt="logo" className="w-28"/>
</Link>
</div>
{toggleSidebar && (
<div className="fixed w-4/5 bg-white h-screen overflow-y-auto shadow-md z-10 animate-slide-in">
<div className="absolute w-full flex justify-end items-center p-2">
<AiFillCloseCircle fontSize={30} className="cursor-pointer" onClick={() => setToggleSidebar(false)}/>
</div>
<Sidebar user={user && user} closeToggle={setToggleSidebar} />
</div>
)}
</div>
<div className="pb-2 flex-1 h-screen overflow-y-scroll" ref={scrollRef}>
<Routes>
<Route path="/user-profile/:userId" element={<UserProfile />} />
<Route path="/*" element={<Pins user={user && user} />} />
</Routes>
</div>
</div>
)
}
export default Home
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
margin: {
320: '320px',
},
width: {
190: '190px',
275: '275px',
300: '300px',
340: '340px',
350: '350px',
656: '656px',
880: '880px',
508: '508px',
},
height: {
80: '80px',
340: '340px',
370: '370px',
420: '420px',
510: '510px',
600: '600px',
685: '685px',
800: '800px',
'90vh': '90vh',
},
flex: {
0.7: '0.7 1 0%',
},
maxHeight: {
370: '370px',
},
minWidth: {
210: '210px',
350: '350px',
620: '620px',
},
textColor: {
lightGray: '#F1EFEE',
primary: '#FAFAFA',
secColor: '#efefef',
navColor: '#BEBEBE',
},
backgroundColor: {
mainColor: '#FBF8F9',
secondaryColor: '#F0F0F0',
blackOverlay: 'rgba(0, 0 ,0 ,0.7)',
},
keyframes: {
'slide-in': {
'0%': {
'-webkit-transform': 'translateX(-200px)',
transform: 'translateX(-200px)',
},
'100%': {
'-webkit-transform': 'translateX(0px)',
transform: 'translateX(0px)',
},
},
'slide-fwd': {
'0%': {
'-webkit-transform': 'translateZ(0px)',
transform: 'translateZ(0px)',
},
'100%': {
'-webkit-transform': 'translateZ(160px)',
transform: 'translateZ(160px)',
},
},
},
animation: {
'slide-in': 'slide-in 0.5s ease-out',
'slide-fwd': ' slide-fwd 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
},
transitionProperty: {
height: 'height',
},
},
cursor: {
'zoom-in': 'zoom-in',
pointer: 'pointer',
},
},
variants: {
// backgroundColor: ['active'],
extend: {},
},
plugins: [],
};
@Diyagarg-15
Copy link

while installing the react app they are suggesting to use next js and other frameworks as react doesn't support postCss tailwind but as u have used them . so whats the way to correct it ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment