11 |
24 |
12 |
14 |
15 |
17 |
18 |
23 |
19 |
22 |
16 |
17 |
24 |
25 |
26 | );
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/frontend/src/assets/cc1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/cc1.jpeg
--------------------------------------------------------------------------------
/frontend/src/assets/cc2.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/cc2.ico
--------------------------------------------------------------------------------
/frontend/src/assets/cc2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/cc2.jpeg
--------------------------------------------------------------------------------
/frontend/src/assets/cc3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/cc3.jpeg
--------------------------------------------------------------------------------
/frontend/src/assets/cc4 - Copy.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/cc4 - Copy.jpeg
--------------------------------------------------------------------------------
/frontend/src/assets/cc4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/cc4.jpeg
--------------------------------------------------------------------------------
/frontend/src/assets/chitchat-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/chitchat-logo.png
--------------------------------------------------------------------------------
/frontend/src/assets/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/profile.jpg
--------------------------------------------------------------------------------
/frontend/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/assets/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PythonBulawayo/ChitChat/ea11090f810e3670588290f6f874c49d3b911879/frontend/src/assets/user.png
--------------------------------------------------------------------------------
/frontend/src/components/Home/CreatePost.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const CreatePost = () => {
4 | return (
5 |
6 |
47 |
48 | );
49 | };
50 |
51 | export default CreatePost;
52 |
--------------------------------------------------------------------------------
/frontend/src/components/Home/MainCanvas.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import CreatePost from "./CreatePost";
3 | import Post from "../common/Post";
4 |
5 | const MainCanvas = () => {
6 | return (
7 |
8 |
16 | );
17 | };
18 |
19 | export default MainCanvas;
20 |
--------------------------------------------------------------------------------
/frontend/src/components/Home/SideBar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { images } from "../../constants";
3 | import { Link } from "react-router-dom";
4 | import useFetchProfileDetails from "../../hooks/profile/useFetchProfileDetails";
5 | import SkeletonLoader from "../Profile/Loaders/HomeProfileSkeleton";
6 |
7 | const SideBar = () => {
8 | const id = 6;
9 | const { isLoading, userProfileData, error, fetchProfileDetails } =useFetchProfileDetails(id)
10 |
11 | const userFirstName = userProfileData?.first_name;
12 | const userLastName = userProfileData?.last_name;
13 | const realname = `${userFirstName} ${userLastName}`;
14 | const userProfilePicture = userProfileData?.profile_picture;
15 | const numberOfFollowers = userProfileData?.followers.length;
16 | const numberOfFollowing = userProfileData?.follows.length;
17 | const username = userProfileData?.user;
18 |
19 | if(isLoading){
20 | return
25 |
59 | );
60 | };
61 |
62 | export default SideBar;
63 |
--------------------------------------------------------------------------------
/frontend/src/components/Home/Suggested.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { SlOptionsVertical } from "react-icons/sl";
3 |
4 | import UserFollow from "../common/UserFollow";
5 |
6 | const Suggested = () => {
7 | return (
8 |
26 |
27 |
38 |
28 |
30 | {username}
29 |
31 | 
36 |
37 |
39 |
44 | 40 | Following 41 |
42 |{numberOfFollowers}
43 |
45 |
50 | 46 | Followers 47 |
48 |{numberOfFollowing}
49 |
51 |
55 | View Profile
56 |
57 |
58 |
9 |
23 | );
24 | };
25 |
26 | export default Suggested;
27 |
--------------------------------------------------------------------------------
/frontend/src/components/Home/TrendingTopics.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { SlOptionsVertical } from "react-icons/sl";
3 | import Trending from "../common/Trending";
4 |
5 | const TrendingTopic = () => {
6 | return (
7 |
10 |
19 | Suggested
11 | 18 |
8 |
20 | );
21 | };
22 |
23 | export default TrendingTopic;
24 |
--------------------------------------------------------------------------------
/frontend/src/components/NavBar/NavBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import { images } from "../../constants";
4 | import NavButtons from "./NavButtons";
5 | import NavSearch from "./NavSearch";
6 |
7 | export const NavBar = () => {
8 | const [dropdownOpen, setDropdownOpen] = useState(false);
9 | const [navOpen, setNavOpen] = useState(false);
10 |
11 | return (
12 |
138 | );
139 | };
140 |
--------------------------------------------------------------------------------
/frontend/src/components/NavBar/NavButtons.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | const NavButtons = () => {
5 | return (
6 |
9 |
18 | Trending topics
10 | 17 |-
7 |
- 8 | 13 | 28 | Home 29 | 30 | 31 |
- 32 | 37 | 52 | 53 | Messages 54 | 55 | 56 |
- 57 | 62 | 79 | 80 | Notifications 81 | 82 | 83 |
Error: {error}
;
30 | }
31 |
32 |
33 | return (
34 |
35 |
53 | );
54 | };
55 |
56 | export default Followers;
57 |
--------------------------------------------------------------------------------
/frontend/src/components/Profile/Following.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import useFetchProfileDetails from "../../hooks/profile/useFetchProfileDetails";
3 | import FollowerSkeletonLoader from "./Loaders/FollowerSkeletonLoader";
4 | import { useNavigate } from "react-router-dom";
5 | import Button from "../common/Button";
6 | import { FaUserCircle } from "react-icons/fa";
7 |
8 | interface FollowingProps {
9 | id: number;
10 | }
11 |
12 | const Following: React.FCFollowers
36 |-
37 | {userProfileData?.followers?.map((follower) => (
38 |
-
42 |
43 |
44 | {follower.username}
45 | 46 | 49 |
50 | )) ||
No followers found.
} 51 |Error: {error}
;
29 | }
30 |
31 | return (
32 |
33 |
53 | );
54 | };
55 |
56 | export default Following;
57 |
--------------------------------------------------------------------------------
/frontend/src/components/Profile/Loaders/FollowerSkeletonLoader.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const FollowerSkeletonLoader = () => {
4 | return (
5 | Following
34 |-
35 | {userProfileData?.follows?.map((following) => (
36 |
-
40 |
41 |
42 | {following.username}
43 | 44 | 49 |
50 | )) ||
No following found.
} 51 |
6 |
27 | );
28 | };
29 |
30 | export default SkeletonLoader;
31 |
--------------------------------------------------------------------------------
/frontend/src/components/Profile/Loaders/PostsSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const PostsSkeletonLoader = () => {
4 | return (
5 |
7 |
8 |
15 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
6 |
7 |
33 | );
34 | };
35 |
36 | export default PostsSkeletonLoader;
37 |
--------------------------------------------------------------------------------
/frontend/src/components/Profile/Loaders/ProfileSkeletonLoader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ProfileSkeletonLoader = () => {
4 | return (
5 | -
8 | {Array.from({ length: 3 }).map((_, index) => (
9 |
-
13 | 14 | 15 |29 |16 |28 |17 | 18 | 19 |20 | 21 | 22 |23 | 24 | 25 | 26 |27 |
30 | ))}
31 |
6 |
15 | );
16 | }
17 |
18 | export default ProfileSkeletonLoader
19 |
--------------------------------------------------------------------------------
/frontend/src/components/Profile/Posts.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import useFetchProfileDetails from "../../hooks/profile/useFetchProfileDetails";
3 | import useFetchProfilePosts from "../../hooks/profile/useFetchPosts";
4 | import PostsSkeletonLoader from "./Loaders/PostsSkeleton";
5 |
6 | interface PostsProps {
7 | id: number;
8 | }
9 |
10 | const Posts: React.FC
7 |
14 |
8 |
13 |
9 |
10 |
11 |
12 | Error: {profileError || postsError}
;
30 | }
31 |
32 | return (
33 |
34 |
116 | );
117 | };
118 |
119 | export default Posts;
120 |
--------------------------------------------------------------------------------
/frontend/src/components/Profile/UserProfileCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import useFetchProfileDetails from "../../hooks/profile/useFetchProfileDetails";
3 | import { images } from "../../constants";
4 | import ProfileSkeletonLoader from "./Loaders/ProfileSkeletonLoader";
5 | import { FaUser, FaUserFriends } from "react-icons/fa";
6 |
7 | interface UserProfileCardProps {
8 | id: number;
9 | }
10 |
11 | const UserProfileCard: React.FCPosts
35 |-
36 | {posts?.map((post) => (
37 |
-
41 | 42 |112 |
50 |
51 |111 |52 |59 |53 | {userProfileData?.user} 54 |
55 |56 | {new Date(post.created_at).toLocaleString()} 57 |
58 |{post.body}
60 |61 |110 |62 | 75 | {post.likes_count} 76 |77 |78 | 91 | Comments 92 |93 |94 | 107 | Share 108 |109 |
113 | )) ||
No posts available.
} 114 |
28 |
59 | );
60 | };
61 |
62 | export default UserProfileCard;
63 |
--------------------------------------------------------------------------------
/frontend/src/components/auth/index.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/react-in-jsx-scope */
2 | import { Button, Card, TextInput, Avatar } from "flowbite-react";
3 | import { useState } from "react";
4 | import { useNavigate } from "react-router-dom";
5 |
6 | export default function Login() {
7 | const [data, setData] = useState({
8 | email: "",
9 | password: "",
10 | });
11 |
12 | const navigate = useNavigate();
13 | const handleNavigation = () => {
14 | navigate("/signup");
15 | };
16 |
17 | const onChange = (e) => {
18 | setData({ ...data, [e.target.id]: e.target.value });
19 | };
20 | return (
21 | <>
22 |
29 |
34 |
35 |
58 |
36 |
57 | {username}
37 |
38 |
39 |
40 |
56 | 43 | Followers {numberOfFollowers}{" "} 44 |
45 | 46 | 47 | 48 |52 | Following {numberOfFollowing}{" "} 53 |
54 | 55 |26 | Welcome to Chit-Chat 27 |
28 | 54 |
16 |
51 | );
52 | };
53 |
54 | export default Post;
55 |
--------------------------------------------------------------------------------
/frontend/src/components/common/Trending.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { LuHash } from "react-icons/lu";
3 | import { Link } from "react-router-dom";
4 |
5 | const trending = ["Django", "Pycon Zimbabwe", "Flusk", "AWS"];
6 |
7 | const Trending = () => {
8 | return (
9 | <>
10 | {trending.map((item, i) => (
11 |
17 | 
22 |
27 |
23 |
26 | Jessica William
24 |{formatPostDate(createdAt)}
25 |
28 |
35 |
36 | 29 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum, 30 | similique neque! Atque autem quibusdam, mollitia vero ea sequi nisi 31 | voluptatibus iste, provident corrupti eligendi cupiditate accusamus 32 | nesciunt, eum corporis harum. 33 |
34 |
37 |
41 |
45 |
49 |
50 |
12 |
13 |
17 | ))}
18 |
19 | );
20 | };
21 |
22 | export default Trending;
23 |
--------------------------------------------------------------------------------
/frontend/src/components/common/UserFollow.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { images } from "../../constants";
3 | import { CiSquarePlus } from "react-icons/ci";
4 |
5 | const UserFollow = () => {
6 | return (
7 | {item}
15 | 16 |
8 |
27 | );
28 | };
29 |
30 | export default UserFollow;
31 |
--------------------------------------------------------------------------------
/frontend/src/components/registration/index.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/react-in-jsx-scope */
2 | import { Button, Card, TextInput, Avatar } from "flowbite-react";
3 | import { useState } from "react";
4 | import axios from "axios";
5 | import { useNavigate } from "react-router-dom";
6 |
7 | export default function Registration() {
8 | const [data, setData] = useState({
9 | email: "",
10 | password: "",
11 | first_name: "",
12 | last_name: "",
13 | username: "",
14 | });
15 |
16 | const navigate = useNavigate();
17 |
18 | const onChange = (e) => {
19 | setData({ ...data, [e.target.id]: e.target.value });
20 | };
21 |
22 | const onSubmit = () => {
23 | if (
24 | data.email === "" ||
25 | data.password === "" ||
26 | data.first_name === "" ||
27 | data.last_name === "" ||
28 | data.username === ""
29 | )
30 | alert("All fields are required");
31 | axios
32 | .post("http://localhost:8000/api/signup", data)
33 | .then(() => {
34 | alert("Success");
35 | navigate("/users");
36 | })
37 | .catch(() => {
38 | alert("Failed to submit");
39 | });
40 | };
41 |
42 | return (
43 |
9 |
14 |
19 |
26 |
15 |
18 | Jessica William
16 |Graphics designer
17 |Welcome to Chit-Chat
47 | 96 |Campanies
;
5 | };
6 |
7 | export default Campanies;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/Home/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SideBar from "../../components/Home/SideBar";
3 | import MainCanvas from "../../components/Home/MainCanvas";
4 | import Suggested from "../../components/Home/Suggested";
5 | import TrendingTopic from "../../components/Home/TrendingTopics";
6 |
7 | export const Home = () => {
8 | return (
9 | JobsPage
;
5 | };
6 |
7 | export default JobsPage;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/Messages/MessagesPage.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const MessagesPage = () => {
4 | return MessagesPage
;
5 | };
6 |
7 | export default MessagesPage;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/Notifications/NotificationsPage.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const NotificationsPage = () => {
4 | return NotificationsPage
;
5 | };
6 |
7 | export default NotificationsPage;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/Signup/index.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/react-in-jsx-scope */
2 | import Registration from "../../components/registration";
3 |
4 | export default function SignUpView() {
5 | return
17 |
22 | );
23 | };
24 |
25 | export default ProfilesPage;
26 |
--------------------------------------------------------------------------------
/frontend/src/pages/projects/ProjectsPage.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Projects = () => {
4 | return Projects
;
5 | };
6 |
7 | export default Projects;
8 |
--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | /** @type {import('tailwindcss').Config} */
3 | export default {
4 | content: [
5 | "./src/**/*.{js,jsx,ts,tsx}",
6 | "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}" /* src folder, for example */,
7 | ],
8 | theme: {
9 | extend: {
10 | colors: {
11 | primary: {
12 | 50: "#ffe5e5",
13 | 100: "#ffb3b3",
14 | 200: "#ff8080",
15 | 300: "#ff4d4d",
16 | 400: "#ff1a1a",
17 | 500: "#ff0000", // Base red
18 | },
19 | subheading: {
20 | 100: "#5c5b5b ",
21 | },
22 | },
23 | typography: {
24 | fontFamily: {
25 | sans: ["Graphik", "sans-serif"],
26 | serif: ["Merriweather", "serif"],
27 | },
28 | fontSize: {
29 | sm: ["14px", "20px"],
30 | base: ["16px", "24px"],
31 | lg: ["18px", "28px"],
32 | xl: ["20px", "32px"],
33 | },
34 | fontWeight: {
35 | normal: 400,
36 | bold: 700,
37 | },
38 | lineHeight: {
39 | normal: "normal",
40 | none: 1,
41 | tight: 1.25,
42 | snug: 1.375,
43 | relaxed: 1.625,
44 | loose: 2,
45 | },
46 | letterSpacing: {
47 | tight: "-0.05em",
48 | normal: "0em",
49 | wide: "0.05em",
50 | },
51 | },
52 | },
53 | },
54 | plugins: [require("flowbite/plugin")],
55 | };
56 |
--------------------------------------------------------------------------------
/frontend/utils/credentialsencoder.ts:
--------------------------------------------------------------------------------
1 |
2 | const encodeCredentials = (username: string, password: string) => {
3 | return btoa(`${username}:${password}`);
4 | };
5 |
6 | export default encodeCredentials
7 |
--------------------------------------------------------------------------------
/frontend/utils/dateFormaters.ts:
--------------------------------------------------------------------------------
1 | export const formatPostDate = (createdAt: string | number | Date) => {
2 | const currentDate = new Date();
3 | const createdAtDate = new Date(createdAt);
4 |
5 | const timeDifferenceInSeconds = Math.floor((currentDate.getTime() - createdAtDate.getTime()) / 1000);
6 | const timeDifferenceInMinutes = Math.floor(timeDifferenceInSeconds / 60);
7 | const timeDifferenceInHours = Math.floor(timeDifferenceInMinutes / 60);
8 | const timeDifferenceInDays = Math.floor(timeDifferenceInHours / 24);
9 |
10 | if (timeDifferenceInDays > 1) {
11 | return createdAtDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
12 | } else if (timeDifferenceInDays === 1) {
13 | return "1d";
14 | } else if (timeDifferenceInHours >= 1) {
15 | return `${timeDifferenceInHours}h`;
16 | } else if (timeDifferenceInMinutes >= 1) {
17 | return `${timeDifferenceInMinutes}m`;
18 | } else {
19 | return "Just now";
20 | }
21 | };
22 |
23 | export const formatMemberSinceDate = (createdAt) => {
24 | const date = new Date(createdAt);
25 | const months = [
26 | "January",
27 | "February",
28 | "March",
29 | "April",
30 | "May",
31 | "June",
32 | "July",
33 | "August",
34 | "September",
35 | "October",
36 | "November",
37 | "December",
38 | ];
39 | const month = months[date.getMonth()];
40 | const year = date.getFullYear();
41 | return `Joined ${month} ${year}`;
42 | };
--------------------------------------------------------------------------------
/frontend/utils/types/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./types";
--------------------------------------------------------------------------------
/frontend/utils/types/types.d.ts:
--------------------------------------------------------------------------------
1 | declare type TechStack = {
2 | title: string;
3 | };
4 |
--------------------------------------------------------------------------------
/frontend/utils/types/types.ts:
--------------------------------------------------------------------------------
1 | export interface UserProfile {
2 | id: number;
3 | url: string;
4 | user: string;
5 | profile_picture: string;
6 | first_name: string;
7 | last_name: string;
8 | follows: Array<{ username: string; url: string }>;
9 | followers: Array<{username: string, url: string}>;
10 | }
11 |
12 | export interface ProfileList {
13 | profiles: UserProfile[];
14 | }
15 |
16 | export interface Post {
17 | id: number;
18 | url: string;
19 | user_profile: string;
20 | body: string;
21 | created_at: string;
22 | likes_count: number;
23 | }
24 |
25 | export interface PostList {
26 | posts: Post[];
27 | }
--------------------------------------------------------------------------------
/frontend/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///