├── styles ├── groupdiscover.module.scss ├── img │ ├── register-bg.jpeg │ ├── arrow.svg │ ├── registerbg.svg │ └── loginbg.svg ├── group_requests.module.scss ├── settings.module.scss ├── colors │ └── variables.scss ├── home.module.scss ├── donations.module.scss └── 404.module.scss ├── components ├── Emojis │ ├── Emojis.module.scss │ ├── Travel.tsx │ ├── Food.tsx │ ├── Animals.tsx │ ├── Objects.tsx │ ├── People.tsx │ ├── Symbols.tsx │ └── Activity.tsx ├── Modals │ ├── Report.module.scss │ ├── ConfirmPin.module.scss │ ├── ConfirmPin.tsx │ └── Report.tsx ├── Posts │ ├── UpdateLoader.module.scss │ ├── Comments │ │ ├── CommentOptions.module.scss │ │ ├── Comments.module.scss │ │ ├── CommentOptions.tsx │ │ ├── Comments.tsx │ │ └── CommentDots.module.scss │ ├── UpdateLoader.tsx │ ├── img │ │ └── arrow.svg │ ├── InputChoice.tsx │ ├── ConfirmDelete.tsx │ ├── Options │ │ ├── RepostCounter.module.scss │ │ ├── RepostCounter.tsx │ │ └── LikeCounter.module.scss │ ├── Poll.module.scss │ ├── InputChoice.module.scss │ ├── PostDots.tsx │ └── PostDots.module.scss ├── RequestPanel │ ├── SentList.module.scss │ ├── SentRequest.module.scss │ ├── SentList.tsx │ ├── SentRequest.tsx │ ├── Sidebar.tsx │ ├── PendingRequest.tsx │ ├── PendingList.tsx │ ├── PendingList.module.scss │ └── Sidebar.module.scss ├── Responsive │ ├── SlideSuggestions.module.scss │ ├── SlideSuggestions.tsx │ ├── ResponsiveNav.module.scss │ ├── SlideContent │ │ ├── User.tsx │ │ └── User.module.scss │ ├── Posts │ │ ├── ResponsiveToPost.module.scss │ │ └── ResposiveToPost.tsx │ ├── SlideFriends.module.scss │ ├── ResponsiveNav.tsx │ ├── SlideFriends.tsx │ ├── TopBar.module.scss │ ├── TopBar.tsx │ └── img │ │ └── snow-logo.svg ├── Updates │ ├── NewUpdateFeatureList.module.scss │ └── NewUpdateFeatureList.tsx ├── RouteLoader.module.scss ├── Register │ ├── PageFive.tsx │ ├── PageOne.module.scss │ ├── PageThree.module.scss │ ├── Errors │ │ ├── ErrorMessage.tsx │ │ └── ErrorMessage.module.scss │ ├── PageDots.tsx │ ├── PageFour.tsx │ ├── PageDots.module.scss │ ├── PageTwo.tsx │ └── PageOne.tsx ├── Groups │ ├── SlideGroups │ │ ├── index.ts │ │ └── GroupsSlide.module.scss │ ├── img │ │ └── arrow.svg │ ├── SearchGroups.tsx │ ├── GroupMembers.tsx │ ├── GroupMembers.module.scss │ └── SearchGroups.module.scss ├── Gallery │ ├── ProgressBar.module.scss │ ├── ProgressBar.tsx │ ├── Loader.tsx │ ├── Loader.module.scss │ ├── ImagePreview.module.scss │ ├── ImagePreview.tsx │ ├── GalleryImage.tsx │ └── ImageModal.tsx ├── Layout.module.scss ├── Button.tsx ├── Trending.module.scss ├── RouteLoader.tsx ├── TextReveal │ └── StaggerText.module.scss ├── Countdown │ ├── SnowWelcome.module.scss │ ├── Countdown.tsx │ └── SnowWelcome.tsx ├── Progress │ ├── Bar.module.scss │ ├── Progress.tsx │ └── Bar.tsx ├── assets │ └── imageResizer.ts ├── Explore │ ├── News.tsx │ ├── TrendingHash.tsx │ ├── TrendingHash.module.scss │ ├── TrendingBar.tsx │ └── TrendingBar.module.scss ├── Button.module.scss ├── Markdown │ ├── Markdown.tsx │ └── ImageMarkdown.tsx ├── Options │ ├── Option.tsx │ ├── Option.module.scss │ ├── OptionsBar.module.scss │ └── OptionsBar.tsx ├── Nav │ ├── ProfileNav.module.scss │ ├── ProfileNav.tsx │ └── Nav.tsx ├── Donations │ └── DonationCard.tsx ├── Settings │ ├── modals │ │ ├── DeleteCommentModal.tsx │ │ ├── EditCommentModal.tsx │ │ └── EditModal.tsx │ ├── SettingsComponent.tsx │ ├── SettingsBar.module.scss │ ├── SettingsBar.tsx │ └── pages │ │ └── Language.tsx ├── TextArea.tsx ├── Welcome │ ├── SnowFAQ.tsx │ └── SnowFAQ.module.scss ├── OpenImage.tsx ├── Chats │ ├── Conversation.module.scss │ └── Message.tsx ├── Hover │ └── HoverUserProfile.tsx ├── Loader.tsx ├── ExploreContainer.tsx ├── Layout.tsx ├── RowMsg.module.scss ├── TextArea.module.scss ├── OpenImage.module.scss ├── UserProfile │ ├── Photos.tsx │ └── MutualFriends.tsx ├── Input.tsx └── ChatInfo.tsx ├── img ├── noCover.jpg ├── login-bg.jpg ├── login-bg2.jpg ├── login-bg3.jpg └── snow-logo.svg ├── public ├── 404 │ └── snow-logo.svg ├── desert.png ├── favicon.ico ├── noCover.jpg ├── noProfile.png ├── user │ ├── noCover.jpg │ ├── noProfile.png │ └── snow-logo.svg ├── groups │ ├── noCover.jpg │ ├── noGroupPic.jpg │ ├── coverexample.jpg │ └── snow-logo.svg ├── verified │ ├── error.svg │ ├── pending.svg │ ├── success.svg │ └── snow-logo.svg ├── db │ └── friendlist.json ├── newupdatecover.svg ├── loginbg.svg ├── snowman.svg ├── vercel.svg ├── snow-logo-white.svg ├── snow-logo.svg └── gallery │ └── snow-logo.svg ├── pages ├── soon.tsx ├── login.tsx ├── register.tsx ├── groups │ ├── panel.tsx │ ├── create.tsx │ └── discover.tsx ├── editprofile.tsx ├── messages.tsx ├── verified │ ├── success.tsx │ └── pending.tsx ├── explore.tsx ├── 404.tsx ├── settings.tsx ├── donations.tsx ├── _app.tsx └── _document.tsx ├── validations ├── GalleryTitleValidation.ts ├── LoginValidation.ts ├── EditProfileValidation.ts ├── GroupValidation.ts └── RegisterValidation.ts ├── .prettierrc ├── next.config.js ├── global.d.ts ├── next-env.d.ts ├── db ├── profile_data.ts ├── message_list.ts └── post_list.ts ├── hooks ├── useSettings.ts ├── useModal.ts ├── useRouteLoading.ts ├── useGetConversations.ts ├── useDragDrop.ts ├── useGetOnlineUsers.ts ├── useTouch.ts ├── useGetUser.ts ├── useLocalStorage.ts ├── useFirestore.ts ├── useFollow.ts ├── usePosts.ts ├── useGiphy.ts ├── useEmojiPicker.ts └── useLogin.ts ├── .babelrc ├── .eslintrc.json ├── server.js ├── .gitignore ├── tsconfig.json ├── .github └── FUNDING.yml └── config └── firebase.config.ts /styles/groupdiscover.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Emojis/Emojis.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Modals/Report.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Modals/ConfirmPin.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Posts/UpdateLoader.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/RequestPanel/SentList.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/RequestPanel/SentRequest.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Posts/Comments/CommentOptions.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Responsive/SlideSuggestions.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Updates/NewUpdateFeatureList.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/noCover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/img/noCover.jpg -------------------------------------------------------------------------------- /components/RouteLoader.module.scss: -------------------------------------------------------------------------------- 1 | @import '../styles/colors/variables.scss'; 2 | 3 | -------------------------------------------------------------------------------- /img/login-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/img/login-bg.jpg -------------------------------------------------------------------------------- /img/login-bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/img/login-bg2.jpg -------------------------------------------------------------------------------- /img/login-bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/img/login-bg3.jpg -------------------------------------------------------------------------------- /public/desert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/desert.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/noCover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/noCover.jpg -------------------------------------------------------------------------------- /public/noProfile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/noProfile.png -------------------------------------------------------------------------------- /public/user/noCover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/user/noCover.jpg -------------------------------------------------------------------------------- /public/groups/noCover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/groups/noCover.jpg -------------------------------------------------------------------------------- /public/user/noProfile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/user/noProfile.png -------------------------------------------------------------------------------- /public/groups/noGroupPic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/groups/noGroupPic.jpg -------------------------------------------------------------------------------- /styles/img/register-bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/styles/img/register-bg.jpeg -------------------------------------------------------------------------------- /public/groups/coverexample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuaDDom/snow-net/HEAD/public/groups/coverexample.jpg -------------------------------------------------------------------------------- /styles/group_requests.module.scss: -------------------------------------------------------------------------------- 1 | .requestPanel{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-between; 5 | } -------------------------------------------------------------------------------- /components/Register/PageFive.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function PageFive() { 4 | return
PageFive
; 5 | } 6 | -------------------------------------------------------------------------------- /components/RequestPanel/SentList.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function SentList() { 4 | return
SentList
; 5 | } 6 | -------------------------------------------------------------------------------- /components/Responsive/SlideSuggestions.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function SlideSuggestions() { 4 | return
SlideSuggestions
; 5 | } 6 | -------------------------------------------------------------------------------- /components/Groups/SlideGroups/index.ts: -------------------------------------------------------------------------------- 1 | import PopularGroups from './PopularGroups'; 2 | import FriendsGroups from './FriendsGroups'; 3 | 4 | export { PopularGroups, FriendsGroups }; 5 | -------------------------------------------------------------------------------- /pages/soon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Countdown from '../components/Countdown/Countdown'; 3 | 4 | export default function soon() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /validations/GalleryTitleValidation.ts: -------------------------------------------------------------------------------- 1 | import * as yup from 'yup'; 2 | 3 | export const gallerySchema = yup.object().shape({ 4 | title: yup.string().max(15).min(5).required() 5 | }) -------------------------------------------------------------------------------- /components/Gallery/ProgressBar.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .progressBar{ 4 | height: 5px; 5 | background: $primary; 6 | transition: 0.6s; 7 | } -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "tabWidth": 4, 4 | "printWidth": 100, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "jsxBracketSameLine": true 8 | } 9 | -------------------------------------------------------------------------------- /components/Posts/Comments/Comments.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .commentsContainer{ 3 | padding-bottom: 15px; 4 | .comments{ 5 | display: flex; 6 | flex-direction: column-reverse; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /validations/LoginValidation.ts: -------------------------------------------------------------------------------- 1 | import * as yup from 'yup'; 2 | 3 | export const loginSchema = yup.object().shape({ 4 | email: yup.string().email().required(), 5 | password: yup.string().required() 6 | }) -------------------------------------------------------------------------------- /components/RequestPanel/SentRequest.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './SentRequest.module.scss'; 3 | 4 | export default function SentRequest() { 5 | return
SentRequest
; 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import('next').NextConfig} 3 | */ 4 | 5 | const nextConfig = { 6 | reactStrictMode: true, 7 | trailingSlash: true 8 | }; 9 | 10 | module.exports = nextConfig; 11 | -------------------------------------------------------------------------------- /validations/EditProfileValidation.ts: -------------------------------------------------------------------------------- 1 | import * as yup from 'yup'; 2 | 3 | export const editProfileSchema = yup.object().shape({ 4 | name: yup.string().email().required(), 5 | lastname: yup.string().required() 6 | }) -------------------------------------------------------------------------------- /components/Layout.module.scss: -------------------------------------------------------------------------------- 1 | .layout{ 2 | padding: 0 60px; 3 | padding-top: 85px; 4 | } 5 | @media (max-width: 1200px){ 6 | .layout{ 7 | padding: 0; 8 | padding-top: 50px; 9 | } 10 | } -------------------------------------------------------------------------------- /components/Posts/UpdateLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './UpdateLoader.module.scss'; 3 | 4 | export default function UpdateLoader() { 5 | return
; 6 | } 7 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'emojis-unicode'; 2 | declare module 'react-apple-emojis'; 3 | declare module 'next-auth/client'; 4 | declare module 'colcade'; 5 | declare module 'mention-hashtag'; 6 | declare module 'pusher-client'; 7 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /validations/GroupValidation.ts: -------------------------------------------------------------------------------- 1 | import * as yup from 'yup'; 2 | 3 | export const groupSchema = yup.object().shape({ 4 | title: yup.string().max(15).min(5).required(), 5 | description: yup.string().max(75).min(10).required() 6 | }) -------------------------------------------------------------------------------- /components/Updates/NewUpdateFeatureList.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './NewUpdateFeatureList.module.scss'; 3 | 4 | export default function NewUpdateFeatureList() { 5 | return
NewUpdateFeatureList
; 6 | } 7 | -------------------------------------------------------------------------------- /components/Button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Button.module.scss'; 3 | 4 | export default function Button({ children }: { children: string }) { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /db/profile_data.ts: -------------------------------------------------------------------------------- 1 | export const profileData = { 2 | name: "Jadom", 3 | lastname: "Dev", 4 | banner: '', 5 | image: "https://images.pexels.com/photos/6858665/pexels-photo-6858665.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" 6 | } -------------------------------------------------------------------------------- /hooks/useSettings.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | export const useSettings = () => { 4 | const [name, setName] = useState(''); 5 | const [lastname, setLastname] = useState(''); 6 | const [username, setUserame] = useState(''); 7 | }; 8 | -------------------------------------------------------------------------------- /components/Trending.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .popularNowContainer{ 3 | width: 500px; 4 | height: 100vh; 5 | position: fixed; 6 | top: 55px; 7 | left: 0; 8 | display: flex; 9 | align-items: center; 10 | flex-direction: column; 11 | } -------------------------------------------------------------------------------- /hooks/useModal.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export const useModal = ()=>{ 4 | const [isOpen, setIsOpen] = useState(false); 5 | const handleOpenModal = ()=> isOpen ? setIsOpen(false) : setIsOpen(true); 6 | 7 | return {isOpen, handleOpenModal} 8 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [ 4 | "babel-plugin-transform-typescript-metadata", 5 | ["@babel/plugin-proposal-decorators", { "legacy": true }], 6 | ["@babel/plugin-proposal-class-properties", { "loose": true }] 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /hooks/useRouteLoading.ts: -------------------------------------------------------------------------------- 1 | import Router from "next/router"; 2 | import { useState } from "react"; 3 | import create from 'zustand'; 4 | 5 | export const useRouteLoading = create((set: any)=>({ 6 | isAnimating: false, 7 | setIsAnimating: (isAnimating: any)=> set(()=> ({isAnimating})) 8 | })) -------------------------------------------------------------------------------- /components/Register/PageOne.module.scss: -------------------------------------------------------------------------------- 1 | .link{ 2 | p{ 3 | padding-left: 10px; 4 | padding-top: 5px; 5 | font-size: 1em; 6 | letter-spacing: 0.8px; 7 | a{ 8 | color: #7ff1fb; 9 | text-decoration: underline; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /components/RouteLoader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './RouteLoader.module.scss'; 3 | 4 | interface Props { 5 | isRouteLoading: boolean; 6 | } 7 | 8 | export default function RouteLoader({ isRouteLoading }: Props) { 9 | return
; 10 | } 11 | -------------------------------------------------------------------------------- /pages/login.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import LoginComponent from '../components/LoginComponent'; 3 | import { AuthProvider } from '../context/AuthContext'; 4 | 5 | export default function Login() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /styles/settings.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .settingsContainer{ 3 | max-width: 100%; 4 | display: flex; 5 | justify-content: space-between; 6 | overflow: hidden; 7 | } 8 | 9 | @media (max-width: 1200px){ 10 | .settingsContainer{ 11 | width: 100vw; 12 | display: flex; 13 | justify-content: none; 14 | } 15 | } -------------------------------------------------------------------------------- /components/Gallery/ProgressBar.tsx: -------------------------------------------------------------------------------- 1 | import styles from './ProgressBar.module.scss'; 2 | import React from 'react'; 3 | 4 | interface Props { 5 | progress: number; 6 | url?: string; 7 | } 8 | 9 | export default function ProgressBar({ url, progress }: Props) { 10 | return
; 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "plugin:react/recommended", "next/core-web-vitals"], 3 | "globals": { 4 | "NodeJS": true 5 | }, 6 | "rules": { 7 | "react/no-children-prop": 0, 8 | "react/react-in-jsx-scope": "off", 9 | "no-unused-vars": "off", 10 | "no-redeclare": "off" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /pages/register.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import RegisterComponent from '../components/Register/RegisterComponent'; 3 | import { AuthProvider } from '../context/AuthContext'; 4 | 5 | export default function Register() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /components/TextReveal/StaggerText.module.scss: -------------------------------------------------------------------------------- 1 | .stagger-animation-text{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .stagger-change-top, .stagger-change-bottom{ 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | margin: 0; 14 | padding: 0; 15 | } -------------------------------------------------------------------------------- /components/Countdown/SnowWelcome.module.scss: -------------------------------------------------------------------------------- 1 | .snowWelcomeContainer{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | width: 100%; 6 | height: 100vh; 7 | background: #00102c; 8 | transition: 2s cubic-bezier(1,0,0,1); 9 | &.launch{ 10 | transform: translateY(-100%); 11 | } 12 | div{ 13 | width: 100%; 14 | height: 15%; 15 | } 16 | } -------------------------------------------------------------------------------- /components/Progress/Bar.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .progressBarContainer{ 4 | pointer-events: none; 5 | z-index: 40; 6 | .progressBar{ 7 | background: linear-gradient(90deg, $primary, $secondary); 8 | height: 4px; 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | z-index: 40; 14 | opacity: 1; 15 | } 16 | } -------------------------------------------------------------------------------- /components/Register/PageThree.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .register{ 4 | width: 384px; 5 | height: 40px; 6 | background: $primary; 7 | color: #000; 8 | border-radius: 10px; 9 | border: none; 10 | font-size: 1em; 11 | transition: 0.3s; 12 | &:hover{ 13 | transform: translateY(-3px); 14 | background: #59ffff; 15 | box-shadow: 0 5px 20px #222c32; 16 | } 17 | } -------------------------------------------------------------------------------- /pages/groups/panel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PendingList from '../../components/RequestPanel/PendingList'; 3 | import Sidebar from '../../components/RequestPanel/Sidebar'; 4 | import styles from '../../styles/group_requests.module.scss'; 5 | 6 | export default function RequestPanel() { 7 | return ( 8 |
9 | 10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /pages/editprofile.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../components/Layout'; 3 | import { AuthProvider } from '../context/AuthContext'; 4 | import EditProfile from '../components/UserProfile/EditProfile'; 5 | 6 | export default function profile() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /components/Progress/Progress.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Bar from './Bar'; 3 | import { useNProgress } from '@tanem/react-nprogress'; 4 | 5 | export default function Progress({ isAnimating }: { isAnimating: boolean }) { 6 | const { animationDuration, isFinished, progress } = useNProgress({ 7 | isAnimating 8 | }); 9 | return ( 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /components/Emojis/Travel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | } 7 | 8 | export default function Travel({ data }: Props) { 9 | return ( 10 | <> 11 | {data.map((emoji: any) => ( 12 | 13 | {emoji.native} 14 | 15 | ))} 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /pages/groups/create.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CreateGroup from '../../components/Groups/CreateGroup'; 3 | import Layout from '../../components/Layout'; 4 | import { AuthProvider } from '../../context/AuthContext'; 5 | import styles from '../../styles/creategroup.module.scss'; 6 | 7 | export default function Create() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /components/Responsive/ResponsiveNav.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .responsiveNav{ 4 | width: 100%; 5 | height: 55px; 6 | background: $darkblue; 7 | position: fixed; 8 | bottom: 0; 9 | left: 0; 10 | z-index: 10; 11 | .icons{ 12 | color: #fff; 13 | height: 100%; 14 | width: 100%; 15 | display: flex; 16 | align-items: center; 17 | justify-content: space-between; 18 | padding: 0 30px; 19 | font-size: 1.3em; 20 | } 21 | } -------------------------------------------------------------------------------- /components/Register/Errors/ErrorMessage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { IoMdClose } from 'react-icons/io'; 3 | import { MdError } from 'react-icons/md'; 4 | import styles from './ErrorMessage.module.scss'; 5 | 6 | interface Props { 7 | error: string; 8 | } 9 | 10 | export default function ErrorMessage({ error }: Props) { 11 | return ( 12 |
13 | 14 | 15 | 16 |

{error}

17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /components/assets/imageResizer.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import Resizer from 'react-image-file-resizer'; 3 | 4 | export const imageResizer = (file: File, height?: number, width?: number) => 5 | new Promise(resolve => { 6 | Resizer.imageFileResizer( 7 | file, 8 | width || 650, 9 | height || 650, 10 | 'JPEG', 11 | 80, 12 | 0, 13 | url => { 14 | resolve(url); 15 | }, 16 | 'file' 17 | ); 18 | }); 19 | -------------------------------------------------------------------------------- /components/Explore/News.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../styles/explore.module.scss'; 3 | 4 | interface Props { 5 | title: string; 6 | img: string; 7 | topic: string; 8 | } 9 | 10 | export default function News({ title, img, topic }: Props) { 11 | return ( 12 |
13 | {title} 14 |
15 |

{topic} News

16 |

{title}

17 |
18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/Button.module.scss: -------------------------------------------------------------------------------- 1 | $primary: #8bffff; 2 | $secondary: #0099ff; 3 | 4 | .button { 5 | width: 200px; 6 | height: 45px; 7 | display: block; 8 | font-size: 1em; 9 | color: #fff; 10 | transition: 0.3s; 11 | font-family: 'Nunito Sans', sans-serif; 12 | border-radius: 12px; 13 | background: #00bbff; 14 | cursor: pointer; 15 | color: #000; 16 | border: none; 17 | &:hover { 18 | background: #38b9ff; 19 | transform: translateY(-4px); 20 | box-shadow: 0 4px 10px #000; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /hooks/useGetConversations.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios" 2 | import { useEffect, useState } from "react" 3 | 4 | export const useGetConversations = (userId: string)=>{ 5 | const [conversations, setConversations] = useState([]); 6 | 7 | useEffect(()=>{ 8 | const fetchData = async ()=>{ 9 | try{ 10 | const res = await axios.get('/api/chats/' + userId); 11 | setConversations(res.data); 12 | } catch(err){ 13 | console.log(err); 14 | } 15 | } 16 | },[]) 17 | } -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const next = require('next'); 3 | 4 | const port = parseInt(process.env.PORT, 10) || 3000; 5 | const dev = process.env.NODE_ENV !== 'production'; 6 | const app = next({ dev }); 7 | const handle = app.getRequestHandler(); 8 | 9 | app.prepare().then(() => { 10 | const server = express(); 11 | 12 | server.all('*', (req, res) => { 13 | return handle(req, res); 14 | }); 15 | 16 | server.listen(port, () => { 17 | console.log(`> Ready on http://localhost:${port}`); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /styles/img/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Gallery/Loader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Circles, Puff } from 'react-loader-spinner'; 3 | import { useMediaQuery } from 'react-responsive'; 4 | import styles from './Loader.module.scss'; 5 | 6 | export default function Loader() { 7 | const isResponsive = useMediaQuery({ query: '(min-width: 1200px)' }); 8 | return ( 9 |
10 | 11 |

Loading your images...

12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /components/Groups/img/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Posts/img/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Modals/ConfirmPin.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './ConfirmPin.module.scss'; 3 | 4 | export default function ConfirmPin() { 5 | return ( 6 |
7 |
8 |
Pin this post?
9 |

This post will appear on top of all your other posts

10 |
11 | 12 | 13 |
14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /components/Markdown/Markdown.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Markdown({ node, children }: any) { 4 | if (node.children[0].tagName === 'img') { 5 | const image: any = node.children[0]; 6 | return ( 7 |
8 | {image.properties.alt} 14 |
15 | ); 16 | } 17 | return

{children}

; 18 | } 19 | -------------------------------------------------------------------------------- /db/message_list.ts: -------------------------------------------------------------------------------- 1 | export const messageList = [ 2 | { 3 | id: 1, 4 | image: 'https://preview.free3d.com/img/2017/12/2212613950170727846/c91eu4no-900.jpg', 5 | name: 'Rony', 6 | lastname: 'Giova', 7 | lastMessage: 'Hello bro, do you want to play?' 8 | }, 9 | { 10 | id: 2, 11 | image: 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/watercolor-landscape-cape-breton-23-nova-scotia-canada-carlson-imagery.jpg', 12 | name: 'Franz', 13 | lastname: 'Rei', 14 | lastMessage: 'Sure, good night' 15 | }, 16 | ] -------------------------------------------------------------------------------- /components/Options/Option.tsx: -------------------------------------------------------------------------------- 1 | import Router from 'next/router'; 2 | import React from 'react'; 3 | import styles from './Option.module.scss'; 4 | 5 | interface Props { 6 | Icon?: any; 7 | title: string; 8 | href: string; 9 | img?: any; 10 | } 11 | 12 | export default function Option({ Icon, title, href }: Props) { 13 | return ( 14 |
Router.push(href)}> 15 | 16 | 17 | 18 |
{title}
19 | 20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /components/Options/Option.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .optionContainer{ 4 | padding: 15px 10px; 5 | display: flex; 6 | align-items: center; 7 | transition: background 0.3s; 8 | border-radius: 10px; 9 | cursor: pointer; 10 | &:hover{ 11 | background: $black2h; 12 | } 13 | span{ 14 | font-size: 1.7em; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | h5{ 20 | padding-left: 15px; 21 | font-size: 1em; 22 | font-weight: 500; 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | 39 | ./.vscode 40 | 41 | ./.env 42 | 43 | ./config -------------------------------------------------------------------------------- /public/verified/error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/messages.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import ChatInfo from '../components/ChatInfo'; 3 | import Layout from '../components/Layout'; 4 | import MessageList from '../components/Chats/MessageList'; 5 | import styles from '../styles/messages.module.scss'; 6 | import { AuthProvider } from '../context/AuthContext'; 7 | import MessagesComponent from '../components/Chats/MessagesComponent'; 8 | 9 | export default function messages() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/api/auth/[...nextauth].js", "config/firebase.config.ts"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /components/Responsive/SlideContent/User.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './User.module.scss'; 3 | 4 | interface Props { 5 | profilePic: string; 6 | name: string; 7 | username: string; 8 | } 9 | 10 | export default function User({ profilePic, name, username }: Props) { 11 | return ( 12 |
13 | {username} 14 |
15 |
{name}
16 |

@{username}

17 |
18 | 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /components/Nav/ProfileNav.module.scss: -------------------------------------------------------------------------------- 1 | .profileNav{ 2 | position: relative; 3 | height: 45px; 4 | width: 45px; 5 | cursor: pointer; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | .imageProfile{ 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | img{ 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | height: 100%; 20 | width: 100%; 21 | border-radius: 50%; 22 | background-size: cover; 23 | object-fit: cover; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /components/Responsive/Posts/ResponsiveToPost.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../styles/colors/variables.scss'; 2 | 3 | .responsiveToPost{ 4 | width: 100vw; 5 | height: 100vh; 6 | position: absolute; 7 | left: 0; 8 | bottom: 0; 9 | .createPost{ 10 | width: 57px; 11 | height: 57px; 12 | color: #fff; 13 | background: $secondary; 14 | position: fixed; 15 | bottom: 70px; 16 | right: 20px; 17 | border: none; 18 | border-radius: 50%; 19 | z-index: 40; 20 | font-size: 1.7em; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | } -------------------------------------------------------------------------------- /public/verified/pending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /components/Emojis/Food.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | handleClick: (emoji: string) => void; 7 | } 8 | 9 | export default function Food({ data, handleClick }: Props) { 10 | return ( 11 | <> 12 | {data.map((emoji: any) => ( 13 | handleClick(emoji.native)}> 18 | {emoji.native} 19 | 20 | ))} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/Emojis/Animals.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | handleClick: (emoji: string) => void; 7 | } 8 | 9 | export default function Animals({ data, handleClick }: Props) { 10 | return ( 11 | <> 12 | {data.map((emoji: any) => ( 13 | handleClick(emoji.native)}> 18 | {emoji.native} 19 | 20 | ))} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/Emojis/Objects.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | handleClick: (emoji: string) => void; 7 | } 8 | 9 | export default function Objects({ data, handleClick }: Props) { 10 | return ( 11 | <> 12 | {data.map((emoji: any) => ( 13 | handleClick(emoji.native)}> 18 | {emoji.native} 19 | 20 | ))} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/Emojis/People.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | handleClick: (emoji: string) => void; 7 | } 8 | 9 | export default function People({ data, handleClick }: Props) { 10 | return ( 11 | <> 12 | {data.map((emoji: any) => ( 13 | handleClick(emoji.native)}> 18 | {emoji.native} 19 | 20 | ))} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/Emojis/Symbols.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | handleClick: (emoji: string) => void; 7 | } 8 | 9 | export default function Symbols({ data, handleClick }: Props) { 10 | return ( 11 | <> 12 | {data.map((emoji: any) => ( 13 | handleClick(emoji.native)}> 18 | {emoji.native} 19 | 20 | ))} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/Emojis/Activity.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Emojis.module.scss'; 3 | 4 | interface Props { 5 | data: any; 6 | handleClick: (emoji: string) => void; 7 | } 8 | 9 | export default function Activity({ data, handleClick }: Props) { 10 | return ( 11 | <> 12 | {data.map((emoji: any) => ( 13 | handleClick(emoji.native)}> 18 | {emoji.native} 19 | 20 | ))} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /styles/colors/variables.scss: -------------------------------------------------------------------------------- 1 | $primary: #8bffff; 2 | $secondary: #0099ff; 3 | $secondaryh: #0077c7; 4 | $aqua: #6dffff; 5 | $aquah: #90ffff; 6 | $background: #0e1318; 7 | $dark: #131720; 8 | $black: #0a101a; 9 | $blackh: #2c2c2c; 10 | $black2: rgb(21, 28, 39); 11 | $black2h: #1d2531; 12 | $black3: #1d2636; 13 | $black3h: #222d40; 14 | $black4: #20293a; 15 | $black4h: #263247; 16 | $white: #e0e0e0; 17 | $whiteh: #dbdbdb; 18 | $white2: #dbdbdb; 19 | $white2h: #cecece; 20 | $white3: #bbbbbb; 21 | $white3h: #bbbbbb; 22 | $delete: #ff3939; 23 | $deleteh: #ff5f5f; 24 | $darkblue: #04090e; 25 | $yellow: #ffd93d; 26 | $yellowh: #ffe26e; 27 | $green: #60d660; 28 | $greenh: #3dce3d; 29 | $bluegrey: #23334b; 30 | $bluegreyh: #293b55; 31 | -------------------------------------------------------------------------------- /hooks/useDragDrop.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useDragDrop = ({setFile, containerRef}: any)=>{ 4 | const [isOver, setIsOver] = useState(false); 5 | 6 | containerRef.current?.addEventListener('dragover', (e: any)=>{ 7 | setIsOver(true) 8 | }); 9 | 10 | ["dragleave", "dragend"].forEach(type=>{ 11 | containerRef.current?.addEventListener(type, ()=>{ 12 | setIsOver(false); 13 | }); 14 | }); 15 | 16 | containerRef.current?.addEventListener('drop', (e: any)=>{ 17 | e.preventDefault(); 18 | setFile(e.dataTransfer.files[0]) 19 | setIsOver(false); 20 | }); 21 | 22 | return { 23 | isOver 24 | } 25 | } -------------------------------------------------------------------------------- /components/Gallery/Loader.module.scss: -------------------------------------------------------------------------------- 1 | .loaderContainer{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100%; 6 | width: 100%; 7 | flex-direction: column; 8 | margin-top: 350px; 9 | animation: disappear 1s forwards; 10 | animation-delay: 2s; 11 | h3{ 12 | font-size: 2.3em; 13 | font-weight: 500; 14 | color: #fff; 15 | } 16 | } 17 | 18 | @keyframes disappear { 19 | from{ 20 | opacity: 1; 21 | } to{ 22 | opacity: 0; 23 | } 24 | } 25 | 26 | @media (max-width: 1200px){ 27 | .loaderContainer{ 28 | h3{ 29 | font-size: 1.3em; 30 | text-align: center; 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: quaddom 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: https://paypal.me/mateotyt 14 | -------------------------------------------------------------------------------- /components/Responsive/SlideFriends.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | .slideFriendsContainer{ 3 | width: 100vw; 4 | height: 28vh; 5 | background: $black2; 6 | padding: 10px 0px; 7 | h3{ 8 | padding: 0 20px; 9 | padding-bottom: 0px; 10 | font-weight: 400; 11 | font-size: 1em; 12 | } 13 | .slide{ 14 | min-width: 90vw; 15 | overflow: hidden; 16 | height: 22vh; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | div{ 21 | width: 100vw; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /pages/verified/success.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import React from 'react'; 3 | import styles from '../../styles/verified.module.scss'; 4 | 5 | export default function success() { 6 | return ( 7 |
8 |
9 |
10 |
11 | 12 |
13 |

You have successfully registered in Snow!

14 | 17 |
18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/Progress/Bar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Bar.module.scss'; 3 | 4 | export default function Bar({ animationDuration, progress, isFinished }: any) { 5 | return ( 6 |
12 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /styles/home.module.scss: -------------------------------------------------------------------------------- 1 | .homeContainer { 2 | height: 100vh; 3 | display: flex; 4 | width: 100%; 5 | z-index: 14; 6 | .bar { 7 | position: fixed; 8 | top: 105px; 9 | left: 0; 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | flex-direction: column; 14 | overflow-y: auto; 15 | &::-webkit-scrollbar { 16 | width: 0px; 17 | } 18 | &::-webkit-scrollbar-thumb { 19 | background: #ffffff60; 20 | transition: 0.3s; 21 | border-radius: 20px; 22 | width: 0; 23 | &:hover { 24 | background: #ffffff99; 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /components/Groups/SlideGroups/GroupsSlide.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../../styles/colors/variables.scss'; 2 | 3 | .slideContainer{ 4 | width: 100%; 5 | height: 440px; 6 | position: relative; 7 | padding: 0px 50px; 8 | padding-top: 10px; 9 | h3{ 10 | font-size: 1.8em; 11 | } 12 | .slide{ 13 | padding: 30px 10px; 14 | padding-left: 15px; 15 | } 16 | } 17 | @media (max-width: 1500px){ 18 | .slideContainer{ 19 | height: 350px; 20 | } 21 | } 22 | @media (max-width: 1200px) { 23 | .slideContainer{ 24 | width: 100vw; 25 | height: 38vh; 26 | h3{ 27 | font-size: 1.5em; 28 | } 29 | p{ 30 | font-size: 0.9em; 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /hooks/useGetOnlineUsers.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from 'react'; 2 | import { io } from 'socket.io-client'; 3 | 4 | export const useGetOnlineUsers = () => { 5 | const [onlineUsers, setOnlineUsers] = useState([]); 6 | 7 | const socket = useRef(null); 8 | 9 | // useEffect(() => { 10 | // socket.current = io('ws://localhost:8080'); 11 | // socket.current.on('getUsers', (users: any) => { 12 | // console.log('users', users); 13 | // const onlineUsersId = users.map((user: any) => user.userId); 14 | // setOnlineUsers(onlineUsersId); 15 | // console.log(`Online Users ${onlineUsersId}`); 16 | // }); 17 | // }, []); 18 | 19 | return onlineUsers; 20 | }; 21 | -------------------------------------------------------------------------------- /components/Explore/TrendingHash.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './TrendingHash.module.scss'; 3 | import { FiHash } from 'react-icons/fi'; 4 | 5 | interface Props { 6 | hashName: string; 7 | topic: string; 8 | totalPosts: string; 9 | } 10 | 11 | export default function TrendingHash({ hashName, topic, totalPosts }: Props) { 12 | return ( 13 |
14 |
15 | 16 |
17 |
18 |

Trending in {topic}

19 |
{hashName}
20 |

{totalPosts} Posts

21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /components/Register/PageDots.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './PageDots.module.scss'; 3 | 4 | interface Props { 5 | page: number; 6 | } 7 | 8 | export default function PageDots({ page }: Props) { 9 | return ( 10 |
11 | 17 |
= 1 && styles.active}`}>1
18 |
= 2 && styles.active}`}>2
19 |
= 3 && styles.active}`}>3
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /pages/groups/discover.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import SearchGroups from '../../components/Groups/SearchGroups'; 3 | import { PopularGroups, FriendsGroups } from '../../components/Groups/SlideGroups'; 4 | import Layout from '../../components/Layout'; 5 | import { AuthProvider } from '../../context/AuthContext'; 6 | import styles from '../../styles/groupdiscover.module.scss'; 7 | 8 | export default function DiscoverGroups() { 9 | return ( 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/Countdown/Countdown.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import styles from './Countdown.module.scss'; 3 | import SnowWelcome from './SnowWelcome'; 4 | import LoginComponent from '../LoginComponent'; 5 | import CountdownComponent from './CountdownComponent'; 6 | import { AuthProvider } from '../../context/AuthContext'; 7 | import Router from 'next/router'; 8 | 9 | export default function Countdown() { 10 | const [launch, setLaunch] = useState(false); 11 | const [isLaunch, setIsLaunch] = useState(false); 12 | 13 | return ( 14 |
15 | 16 | 17 | 18 | 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /public/db/friendlist.json: -------------------------------------------------------------------------------- 1 | {"friendlist": [ 2 | { 3 | "id": 1, 4 | "image": "", 5 | "name": "Jacob", 6 | "lastname": "Space", 7 | "status": "offline" 8 | }, 9 | { 10 | "id": 2, 11 | "image": "", 12 | "name": "Mateo", 13 | "lastname": "Quadrelli", 14 | "status": "online" 15 | }, 16 | { 17 | "id": 3, 18 | "image": "", 19 | "name": "Josefina", 20 | "lastname": "Peréz", 21 | "status": "disturb" 22 | }, 23 | { 24 | "id": 4, 25 | "image": "", 26 | "name": "Valentin", 27 | "lastname": "Salomone", 28 | "status": "online" 29 | }, 30 | { 31 | "id": 5, 32 | "image": "", 33 | "name": "Joaquín", 34 | "lastname": "Sanz", 35 | "status": "idle" 36 | } 37 | ]} -------------------------------------------------------------------------------- /components/Options/OptionsBar.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .optionsBarContainer { 4 | width: 500px; 5 | height: 50vh; 6 | display: flex; 7 | align-items: center; 8 | flex-direction: column; 9 | .options { 10 | background: $black2; 11 | border-radius: 10px; 12 | margin-top: 22px; 13 | width: 400px; 14 | h2 { 15 | margin-bottom: 20px; 16 | margin-left: 5px; 17 | font-weight: 700; 18 | letter-spacing: 1px; 19 | } 20 | padding: 20px; 21 | } 22 | } 23 | 24 | @media (max-width: 1500px) { 25 | .optionsBarContainer { 26 | width: 450px; 27 | .options { 28 | width: 350px; 29 | h2 { 30 | font-size: 0.95em; 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /pages/explore.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../components/Layout'; 3 | import Suggestions from '../components/Suggestions/Suggestions'; 4 | import styles from '../styles/explore.module.scss'; 5 | import ExploreContainer from '../components/ExploreContainer'; 6 | import TrendingBar from '../components/Explore/TrendingBar'; 7 | import { useMediaQuery } from 'react-responsive'; 8 | 9 | export default function Explore() { 10 | const isResponsive = useMediaQuery({ query: '(min-width: 1200px)' }); 11 | 12 | return ( 13 | 14 |
15 | {isResponsive && } 16 | 17 | {isResponsive && } 18 | {!isResponsive && } 19 |
20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /pages/verified/pending.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import React from 'react'; 3 | import styles from '../../styles/verified_pending.module.scss'; 4 | 5 | export default function Pending() { 6 | return ( 7 |
8 |
9 |
10 |
11 | 12 |
13 |

14 | We have sent you a verification by mail! Click the link to finish the 15 | registration 16 |

17 | 20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /public/verified/success.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Markdown/ImageMarkdown.tsx: -------------------------------------------------------------------------------- 1 | import { None } from 'framer-motion'; 2 | import React from 'react'; 3 | 4 | interface Props { 5 | children: any; 6 | node: any; 7 | } 8 | 9 | export default function ImageMarkdown({ children, node }: Props) { 10 | const image = node.children[0]; 11 | const metastring = image.properties.alt; 12 | const alt = metastring?.replace(/ *\{[^)]*\} */g, ''); 13 | const metaWidth = metastring.match(/{([^}]+)x/); 14 | const metaHeight = metastring.match(/x([^}]+)}/); 15 | const width = metaWidth ? metaWidth[1] : '768'; 16 | const height = metaHeight ? metaHeight[1] : '432'; 17 | const isPriority = metastring?.toLowerCase().match('{priority}'); 18 | const hasCaption = metastring?.toLowerCase().includes('{caption:'); 19 | const caption = metastring?.match(/{caption: (.*?)}/)?.pop(); 20 | 21 | return
ImageMarkdown
; 22 | } 23 | -------------------------------------------------------------------------------- /public/newupdatecover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/img/registerbg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Nav/ProfileNav.tsx: -------------------------------------------------------------------------------- 1 | import { profileData } from '../../db/profile_data'; 2 | import React, { useState } from 'react'; 3 | import Profile from '../Profile'; 4 | import styles from './ProfileNav.module.scss'; 5 | 6 | interface Props { 7 | userData: any; 8 | } 9 | 10 | export default function ProfileNav({ userData }: Props) { 11 | const [isOpen, setIsOpen] = useState(false); 12 | const handleClick = () => (isOpen ? setIsOpen(false) : setIsOpen(true)); 13 | return ( 14 |
15 |
16 | {userData && ( 17 | {userData.username} 18 | )} 19 |
20 | 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /hooks/useTouch.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export const useTouch = ()=>{ 4 | const [touch, setTouch] = useState(''); 5 | 6 | let startingX: number, startingY: number, movingX: number, movingY: number; 7 | 8 | const handleTouchStart = (e: any)=>{ 9 | startingX = e.touches[0].clientX; 10 | startingY = e.touches[0].clientY; 11 | } 12 | const handleTouchMove = (e: any)=>{ 13 | movingX = e.touches[0].clientX; 14 | movingY = e.touches[0].clientY; 15 | } 16 | const handleTouchEnd = (e: any)=>{ 17 | if(startingX + 100 < movingX){ 18 | setTouch('right') 19 | } else if(startingX - 100 > movingX){ 20 | setTouch('left') 21 | } 22 | } 23 | 24 | return { 25 | handleTouchStart, 26 | handleTouchMove, 27 | handleTouchEnd, 28 | touch, 29 | setTouch 30 | }; 31 | } -------------------------------------------------------------------------------- /public/loginbg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/img/loginbg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/firebase.config.ts: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase/compat/app'; 2 | import 'firebase/compat/storage'; 3 | import 'firebase/compat/firestore'; 4 | import { getAnalytics } from "firebase/analytics"; 5 | 6 | 7 | const firebaseConfig = { 8 | apiKey: "AIzaSyD24qAbaS2R-hvD6YTFfnrNh4sLuyCPngA", 9 | authDomain: "snow-net-26d1e.firebaseapp.com", 10 | projectId: "snow-net-26d1e", 11 | storageBucket: "snow-net-26d1e.appspot.com", 12 | messagingSenderId: "571666999048", 13 | appId: "1:571666999048:web:15ff9a6edcc2e17633aebd", 14 | measurementId: "G-R3SNG827ZH" 15 | }; 16 | 17 | // Initialize Firebase 18 | firebase.initializeApp(firebaseConfig); 19 | const projectStorage = firebase.storage(); 20 | const projectFirestore = firebase.firestore(); 21 | const timestamp = firebase.firestore.FieldValue.serverTimestamp; 22 | 23 | export { 24 | projectStorage, 25 | projectFirestore, 26 | timestamp 27 | } -------------------------------------------------------------------------------- /components/Responsive/SlideContent/User.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .userContent{ 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | flex-direction: column; 7 | height: 24vh; 8 | width: 20vw; 9 | position: relative; 10 | img{ 11 | width: 65px; 12 | height: 65px; 13 | border-radius: 50%; 14 | } 15 | .text{ 16 | padding: 3px 0; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | flex-direction: column; 21 | h5{ 22 | font-size: 0.9em; 23 | font-weight: 400; 24 | } 25 | p{ 26 | font-size: 0.85em; 27 | color: #999; 28 | } 29 | } 30 | button{ 31 | width: 15%; 32 | margin-top: 5px; 33 | border-radius: 10px; 34 | border: 1.5px solid #fff; 35 | background: #fff; 36 | } 37 | } -------------------------------------------------------------------------------- /components/Donations/DonationCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './DonationCard.module.scss'; 3 | 4 | interface Props { 5 | title: string; 6 | info: string; 7 | icon?: any; 8 | price: number; 9 | } 10 | 11 | export default function DonationCard({ title, info, price, icon }: Props) { 12 | const style = (price === 10 && styles.violet) || (price === 20 && styles.blue); 13 | return ( 14 |
15 |
16 |
17 | 18 |
19 |

{title}

20 |

{info}

21 |

${price}

22 | 23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /public/snowman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/Settings/modals/DeleteCommentModal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Modals.module.scss'; 3 | 4 | export default function DeleteCommentModal() { 5 | return ( 6 |
7 | {/*
setIsOpen(false)}/> */} 8 |
9 |

Delete Comment?

10 |

11 | The comment will be deleted, and this cannot be undone, are you sure you want to 12 | delete this comment? 13 |

14 |
15 | 16 | 17 |
18 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /components/Settings/modals/EditCommentModal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Modals.module.scss'; 3 | 4 | export default function DeleteCommentModal() { 5 | return ( 6 |
7 | {/*
setIsOpen(false)}/> */} 8 |
9 |

Delete Comment?

10 |

11 | The comment will be deleted, and this cannot be undone, are you sure you want to 12 | delete this comment? 13 |

14 |
15 | 16 | 17 |
18 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /components/Explore/TrendingHash.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/colors/variables.scss'; 2 | 3 | .trendingHashContainer{ 4 | height: 70px; 5 | width: 360px; 6 | display: flex; 7 | align-items: center; 8 | padding: 0 5px; 9 | margin-bottom: 1.1rem; 10 | border-radius: 10px; 11 | transition: 0.2s; 12 | cursor: pointer; 13 | &:hover{ 14 | background: $black2h; 15 | } 16 | .hash{ 17 | width: 3vw; 18 | font-size: 1.8em; 19 | color: #999; 20 | } 21 | .info{ 22 | p{ 23 | color: #999; 24 | font-size: 0.85em; 25 | } 26 | h5{ 27 | font-size: 1em; 28 | padding: 3px 0; 29 | } 30 | } 31 | } 32 | 33 | @media (max-width: 1200px){ 34 | .trendingHashContainer{ 35 | width: 100%; 36 | .hash{ 37 | padding-right: 45px; 38 | font-size: 1.4em; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /components/Register/PageFour.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Button from '../Button'; 3 | import styles from '../../styles/register.module.scss'; 4 | import TextArea from '../TextArea'; 5 | 6 | interface Props { 7 | handleChange: () => void; 8 | values: any; 9 | register: any; 10 | errors: any; 11 | } 12 | 13 | export default function PageFour({ handleChange, values, register, errors }: Props) { 14 | return ( 15 |
16 |
17 |