9 |
11 |
13 |
14 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 | return (
16 |
17 | 
18 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/frontend/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "isolatedModules": true,
13 | "moduleDetection": "force",
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/feed/repository/PostRepository.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.feed.repository;
2 |
3 | import com.linkedin.backend.features.feed.model.Post;
4 | import org.springframework.data.jpa.repository.JpaRepository;
5 | import org.springframework.stereotype.Repository;
6 |
7 | import java.util.List;
8 | import java.util.Set;
9 |
10 | @Repository
11 | public interface PostRepository extends JpaRepository
18 |
19 |
20 |
21 |
12 | {label ? (
13 |
16 | ) : null}
17 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/frontend/src/features/profile/pages/Profile/Profile.module.scss:
--------------------------------------------------------------------------------
1 | .profile {
2 | display: grid;
3 | gap: 1rem;
4 |
5 | .main {
6 | display: grid;
7 | gap: 1rem;
8 | }
9 |
10 | .experience,
11 | .education,
12 | .skills {
13 | background-color: white;
14 | border-radius: 0.3rem;
15 | border: 1px solid #e0e0e0;
16 | overflow: hidden;
17 | padding: 1rem;
18 | }
19 |
20 | h2 {
21 | font-weight: bold;
22 | font-size: 1.1rem;
23 | margin-bottom: 0.5rem;
24 | }
25 |
26 | .sidebar {
27 | display: none;
28 | }
29 |
30 | @media screen and (width >= 1024px) {
31 | grid-template-columns: 1fr 20rem;
32 | align-items: flex-start;
33 |
34 | .sidebar {
35 | display: block;
36 | height: max-content;
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/.github/workflows/frontend.yml:
--------------------------------------------------------------------------------
1 | name: Frontend
2 |
3 | on:
4 | workflow_call:
5 |
6 | jobs:
7 | frontend:
8 | runs-on: ubuntu-latest
9 |
10 | steps:
11 | - name: Checkout code
12 | uses: actions/checkout@v4
13 |
14 | - name: Setup Node.js 22
15 | uses: actions/setup-node@v4
16 | with:
17 | node-version: 22
18 |
19 | - name: Install dependencies
20 | working-directory: ./frontend
21 | run: npm ci
22 |
23 | - name: Run ESLint
24 | working-directory: ./frontend
25 | run: npm run lint
26 |
27 | - name: Run Stylelint
28 | working-directory: ./frontend
29 | run: npm run lint:css
30 |
31 | - name: Build frontend
32 | working-directory: ./frontend
33 | run: npm run build
34 |
--------------------------------------------------------------------------------
/frontend/src/features/messaging/components/Messages/Messages.tsx:
--------------------------------------------------------------------------------
1 | import { IUser } from "../../../authentication/contexts/AuthenticationContextProvider";
2 | import classes from "./Messages.module.scss";
3 | import { Message } from "./components/Message/Message";
4 |
5 | export interface IMessage {
6 | id: number;
7 | sender: IUser;
8 | receiver: IUser;
9 | content: string;
10 | isRead: boolean;
11 | createdAt: string;
12 | }
13 |
14 | interface IMessagesProps {
15 | messages: IMessage[];
16 | user: IUser | null;
17 | }
18 |
19 | export function Messages({ messages, user }: IMessagesProps) {
20 | return (
21 |
22 | {messages.map((message) => (
23 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/src/features/profile/components/About/About.module.scss:
--------------------------------------------------------------------------------
1 | .about {
2 | background-color: white;
3 | border-radius: 0.3rem;
4 | border: 1px solid #e0e0e0;
5 | overflow: hidden;
6 | padding: 1rem;
7 |
8 | .header {
9 | display: flex;
10 | align-items: center;
11 | justify-content: space-between;
12 |
13 | .actions {
14 | display: flex;
15 | gap: 0.5rem;
16 | }
17 |
18 | button {
19 | background-color: #f5f5f5;
20 | width: 2rem;
21 | height: 2rem;
22 | border-radius: 50%;
23 | display: grid;
24 | place-items: center;
25 | transition: background-color 0.3s;
26 |
27 | &:hover {
28 | background-color: #e0e0e0;
29 | }
30 | }
31 |
32 | svg {
33 | width: 1rem;
34 | }
35 | }
36 |
37 | input {
38 | width: 100%;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/backend/src/main/resources/application.properties:
--------------------------------------------------------------------------------
1 | spring.application.name=backend
2 | spring.datasource.url=jdbc:mysql://localhost:3306/linkedin?createDatabaseIfNotExist=true
3 | spring.datasource.username=root
4 | spring.datasource.password=root
5 | spring.jpa.hibernate.ddl-auto=create
6 | spring.jpa.show-sql=false
7 | spring.jpa.properties.hibernate.format_sql=true
8 | jwt.secret.key=8dc2d2829a1bc4e11a57ca66da09c0cdb547c4e03d6108c629160e50d536bfe2
9 | spring.mail.host=localhost
10 | spring.mail.port=1025
11 | spring.mail.properties.mail.smtp.auth=false
12 | spring.mail.properties.mail.smtp.starttls.enable=false
13 | oauth.google.client.id=${OAUTH_GOOGLE_CLIENT_ID:}
14 | oauth.google.client.secret=${OAUTH_GOOGLE_CLIENT_SECRET:}
15 | spring.jpa.properties.hibernate.search.backend.type=lucene
16 | spring.jpa.properties.hibernate.search.backend.directory.root=./lucene/indexes
--------------------------------------------------------------------------------
/frontend/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 | import tseslint from 'typescript-eslint'
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': [
23 | 'warn',
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | },
28 | )
29 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/RightSidebar/RightSidebar.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | background-color: white;
3 | border-radius: 0.3rem;
4 | border: 1px solid #e0e0e0;
5 | padding: 1rem;
6 |
7 | h3 {
8 | font-weight: bold;
9 | margin-bottom: 0.5rem;
10 | }
11 |
12 | .items {
13 | display: grid;
14 | gap: 1rem;
15 | }
16 |
17 | .item {
18 | display: flex;
19 | gap: 1rem;
20 | font-size: 0.8rem;
21 |
22 | button {
23 | flex-shrink: 0;
24 | }
25 |
26 | .avatar {
27 | width: 3rem;
28 | height: 3rem;
29 | border-radius: 50%;
30 | overflow: hidden;
31 | }
32 |
33 | .name {
34 | font-weight: bold;
35 | }
36 |
37 | button {
38 | text-align: left;
39 | }
40 |
41 | .button {
42 | width: auto;
43 | margin: 0.3rem 0 0;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/TimeAgo/TimeAgo.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, useEffect, useState } from "react";
2 | import { timeAgo } from "../../utils/date";
3 | import classes from "./TimeAgo.module.scss";
4 |
5 | interface ITimeAgoProps extends HTMLAttributes
23 | {time}
24 | {edited ? . Edited : null}
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/pages/Feed/Feed.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | height: 100%;
3 | display: grid;
4 | gap: 2rem;
5 |
6 | .left,
7 | .right {
8 | display: none;
9 | }
10 |
11 | .center {
12 | display: grid;
13 | gap: 1rem;
14 | height: 100%;
15 | grid-template-rows: auto 1fr;
16 | }
17 |
18 | .posting {
19 | background-color: white;
20 | border-radius: 0.3rem;
21 | border: 1px solid #e0e0e0;
22 | padding: 1rem;
23 | display: grid;
24 | grid-template-columns: 5rem 1fr;
25 | gap: 1rem;
26 |
27 | .avatar {
28 | width: 5rem;
29 | height: 5rem;
30 | border-radius: 50%;
31 | }
32 | }
33 |
34 | .error {
35 | color: red;
36 | }
37 |
38 | @media screen and (width >= 1135px) {
39 | grid-template-columns: 14rem 1fr 20rem;
40 | align-items: flex-start;
41 |
42 | .left,
43 | .right {
44 | display: block;
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/authentication/utils/Encoder.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.authentication.utils;
2 |
3 |
4 | import org.springframework.stereotype.Component;
5 |
6 | import java.security.MessageDigest;
7 | import java.security.NoSuchAlgorithmException;
8 | import java.util.Base64;
9 |
10 |
11 | @Component
12 | public class Encoder {
13 |
14 | public String encode(CharSequence rawPassword) {
15 | try {
16 | MessageDigest digest = MessageDigest.getInstance("SHA-256");
17 | byte[] hash = digest.digest(rawPassword.toString().getBytes());
18 | return Base64.getEncoder().encodeToString(hash);
19 | } catch (NoSuchAlgorithmException e) {
20 | throw new RuntimeException("Error encoding password", e);
21 | }
22 | }
23 |
24 | public boolean matches(CharSequence rawPassword, String encodedPassword) {
25 | return encode(rawPassword).equals(encodedPassword);
26 | }
27 | }
--------------------------------------------------------------------------------
/frontend/src/features/feed/pages/Notifications/Notifications.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | display: grid;
3 | gap: 2rem;
4 |
5 | .left,
6 | .right {
7 | display: none;
8 | }
9 |
10 | .center {
11 | background-color: white;
12 | border-radius: 0.3rem;
13 | border: 1px solid #e0e0e0;
14 | }
15 |
16 | .notification {
17 | display: flex;
18 | align-items: center;
19 | gap: 0.5rem;
20 | padding: 1rem;
21 | width: 100%;
22 |
23 | &:not(:last-child) {
24 | padding-bottom: 1rem;
25 | border-bottom: 1px solid #e0e0e0;
26 | }
27 |
28 | &.unread {
29 | background-color: #f0f0f0;
30 | }
31 |
32 | .avatar {
33 | width: 40px;
34 | height: 40px;
35 | border-radius: 50%;
36 | }
37 | }
38 |
39 | @media screen and (width >= 1135px) {
40 | grid-template-columns: 14rem 1fr 20rem;
41 | align-items: flex-start;
42 |
43 | .left,
44 | .right {
45 | display: block;
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/search/controller/SearchController.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.search.controller;
2 |
3 | import com.linkedin.backend.features.authentication.model.User;
4 | import com.linkedin.backend.features.search.service.SearchService;
5 | import org.springframework.web.bind.annotation.GetMapping;
6 | import org.springframework.web.bind.annotation.RequestMapping;
7 | import org.springframework.web.bind.annotation.RequestParam;
8 | import org.springframework.web.bind.annotation.RestController;
9 |
10 | import java.util.List;
11 |
12 | @RestController
13 | @RequestMapping("/api/v1/search")
14 | public class SearchController {
15 | private final SearchService searchService;
16 |
17 | public SearchController(SearchService searchService) {
18 | this.searchService = searchService;
19 | }
20 |
21 | @GetMapping("/users")
22 | public List
24 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/LeftSidebar/LeftSidebar.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | text-align: center;
3 | padding: 1rem;
4 | background-color: white;
5 | border-radius: 0.3rem;
6 | border: 1px solid #e0e0e0;
7 |
8 | .cover {
9 | height: 7rem;
10 | margin: -1rem;
11 |
12 | img {
13 | width: 100%;
14 | height: 100%;
15 | object-fit: cover;
16 | }
17 | }
18 |
19 | .avatar {
20 | margin-top: -3rem;
21 | width: 6rem;
22 | height: 6rem;
23 | margin-inline: auto;
24 | border-radius: 50%;
25 | overflow: hidden;
26 | border: 2px solid black;
27 | position: relative;
28 | z-index: 2;
29 |
30 | img {
31 | width: 100%;
32 | height: 100%;
33 | object-fit: cover;
34 | }
35 | }
36 |
37 | .name {
38 | font-weight: bold;
39 | }
40 |
41 | .title {
42 | border-bottom: 1px solid #e0e0e0;
43 | padding-bottom: 0.5rem;
44 | font-size: 0.9rem;
45 | }
46 |
47 | .info {
48 | text-align: left;
49 | font-size: 0.8rem;
50 | margin-top: 1rem;
51 | color: rgb(0 0 0 / 60%);
52 |
53 | .item {
54 | display: flex;
55 | justify-content: space-between;
56 | align-items: center;
57 | margin-top: 0.3rem;
58 | width: 100%;
59 |
60 | .value {
61 | font-weight: bold;
62 | }
63 | }
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/frontend/src/features/authentication/components/AuthenticationLayout/AuthenticationLayout.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | display: grid;
3 | grid-template-rows: auto 1fr auto;
4 | min-height: 100vh;
5 |
6 | .container {
7 | max-width: 74rem;
8 | width: 100%;
9 | margin: 0 auto;
10 | padding: 2rem;
11 | }
12 |
13 | a {
14 | color: var(--primary-color);
15 | font-weight: bold;
16 | }
17 |
18 | header {
19 | background: white;
20 | border: 1px solid #e0e0e0;
21 |
22 | .container {
23 | padding-block: 1rem;
24 | }
25 |
26 | a {
27 | display: block;
28 | width: max-content;
29 | }
30 | }
31 |
32 | .logo {
33 | width: 7rem;
34 | }
35 |
36 | main {
37 | display: grid;
38 | align-items: center;
39 | }
40 |
41 | h1 {
42 | font-size: 2rem;
43 | font-weight: bold;
44 | margin-bottom: 1rem;
45 | }
46 |
47 | footer {
48 | font-size: 0.8rem;
49 | background: white;
50 | border: 1px solid #e0e0e0;
51 |
52 | a {
53 | color: rgb(0 0 0 / 60%);
54 | font-weight: normal;
55 | }
56 |
57 | img {
58 | width: 4rem;
59 | height: auto;
60 | }
61 |
62 | ul {
63 | display: flex;
64 | align-items: center;
65 | gap: 1rem;
66 | margin-top: 2rem;
67 | flex-wrap: wrap;
68 | padding: 0;
69 | }
70 |
71 | li {
72 | display: flex;
73 | gap: 0.5rem;
74 | align-items: center;
75 | }
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/frontend/src/components/Loader/Loader.module.scss:
--------------------------------------------------------------------------------
1 | .global {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 |
6 | img {
7 | width: 10rem;
8 | margin: 0 auto;
9 | height: auto;
10 | margin-top: 12rem;
11 | }
12 |
13 | .container,
14 | .content {
15 | height: 0.1rem;
16 | width: 10rem;
17 | border-radius: 9999px;
18 | }
19 |
20 | .container {
21 | margin-top: 1rem;
22 | background-color: rgb(255 255 255);
23 | }
24 |
25 | .content {
26 | width: 4rem;
27 | background-color: var(--primary-color);
28 | animation: slide 1s infinite alternate;
29 | }
30 |
31 | @keyframes slide {
32 | 0% {
33 | transform: translateX(0);
34 | }
35 |
36 | 100% {
37 | transform: translateX(6rem);
38 | }
39 | }
40 | }
41 |
42 | .inline {
43 | display: flex;
44 | justify-content: center;
45 | gap: 0.5rem;
46 | padding-top: 1rem;
47 |
48 | span {
49 | display: inline-block;
50 | width: 0.5rem;
51 | height: 0.5rem;
52 | border-radius: 50%;
53 | background-color: var(--primary-color);
54 | animation: bounce 0.4s infinite alternate;
55 | }
56 |
57 | span:nth-child(2) {
58 | animation-delay: 0.1s;
59 | }
60 |
61 | span:nth-child(3) {
62 | animation-delay: 0.2s;
63 | }
64 |
65 | @keyframes bounce {
66 | 0% {
67 | transform: translateY(0);
68 | }
69 |
70 | 100% {
71 | transform: translateY(-0.2rem);
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/search/configuration/SearchConfiguration.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.search.configuration;
2 |
3 | import jakarta.annotation.PreDestroy;
4 | import org.slf4j.Logger;
5 | import org.slf4j.LoggerFactory;
6 | import org.springframework.context.annotation.Configuration;
7 |
8 | import java.io.File;
9 | import java.io.IOException;
10 | import java.nio.file.Files;
11 | import java.nio.file.Path;
12 | import java.nio.file.Paths;
13 |
14 | @Configuration
15 | public class SearchConfiguration {
16 |
17 | private static final String LUCENE_INDEX_DIR = "./lucene/indexes";
18 | private static final Logger log = LoggerFactory.getLogger(SearchConfiguration.class);
19 |
20 | @PreDestroy
21 | public void cleanUp() {
22 | try {
23 | Path directory = Paths.get(LUCENE_INDEX_DIR);
24 | if (Files.exists(directory)) {
25 | deleteDirectoryRecursively(directory);
26 | log.info("Lucene index directory cleared successfully.");
27 | }
28 | } catch (IOException e) {
29 | log.error("Error while clearing Lucene index directory: {}", e.getMessage());
30 | }
31 | }
32 |
33 | private void deleteDirectoryRecursively(Path path) throws IOException {
34 | Files.walk(path)
35 | .sorted((path1, path2) -> path2.compareTo(path1)) // Sort in reverse order to delete files before directories
36 | .map(Path::toFile)
37 | .forEach(File::delete);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/notifications/controller/NotificationsController.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.notifications.controller;
2 |
3 | import java.util.List;
4 |
5 | import org.springframework.web.bind.annotation.GetMapping;
6 | import org.springframework.web.bind.annotation.PathVariable;
7 | import org.springframework.web.bind.annotation.PutMapping;
8 | import org.springframework.web.bind.annotation.RequestAttribute;
9 | import org.springframework.web.bind.annotation.RequestMapping;
10 | import org.springframework.web.bind.annotation.RestController;
11 |
12 | import com.linkedin.backend.features.authentication.model.User;
13 | import com.linkedin.backend.features.notifications.model.Notification;
14 | import com.linkedin.backend.features.notifications.service.NotificationService;
15 |
16 | @RestController
17 | @RequestMapping("/api/v1/notifications")
18 | public class NotificationsController {
19 | private final NotificationService notificationService;
20 |
21 | public NotificationsController(NotificationService notificationService) {
22 | this.notificationService = notificationService;
23 | }
24 |
25 | @GetMapping
26 | public List
25 |
27 |
28 | {posts.length > 0 &&
30 |
31 |
33 |
23 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/frontend/src/features/authentication/components/AuthenticationLayout/AuthenticationLayout.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router-dom";
2 | import classes from "./AuthenticationLayout.module.scss";
3 |
4 | export function AuthenticationLayout() {
5 | return (
6 | Latest post
24 |
25 | {posts.length > 0 ? (
26 | <>
27 |
41 |
7 |
8 |
14 |
15 |
17 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/Modal/Modal.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | position: fixed;
3 | inset: 0;
4 | background-color: rgb(0 0 0 / 50%);
5 | display: flex;
6 | justify-content: center;
7 | align-items: flex-start;
8 | z-index: 9999;
9 |
10 | .modal {
11 | background-color: white;
12 | border-radius: 0.3rem;
13 | border: 1px solid #e0e0e0;
14 | width: 100%;
15 | max-width: 45rem;
16 | margin: 4.5rem 1rem;
17 | padding: 1rem;
18 | }
19 |
20 | .header {
21 | display: flex;
22 | justify-content: space-between;
23 | align-items: center;
24 | margin-bottom: 1rem;
25 | }
26 |
27 | button.close,
28 | button.cancel {
29 | background-color: #ececec;
30 | width: 2rem;
31 | height: 2rem;
32 | border-radius: 50%;
33 | display: grid;
34 | place-items: center;
35 | }
36 |
37 | button.cancel {
38 | margin-left: auto;
39 | margin-bottom: 0.5rem;
40 | }
41 |
42 | .preview {
43 | position: relative;
44 |
45 | img {
46 | width: 100%;
47 | max-height: 12rem;
48 | }
49 |
50 | button.cancel {
51 | position: absolute;
52 | top: 0.5rem;
53 | right: 0.5rem;
54 | z-index: 1;
55 | display: none;
56 | }
57 |
58 | &:hover button.cancel {
59 | display: grid;
60 | }
61 | }
62 |
63 | .error {
64 | color: red;
65 | }
66 |
67 | .title {
68 | font-weight: bold;
69 | }
70 |
71 | textarea {
72 | width: 100%;
73 | height: 15rem;
74 | resize: none;
75 | border: 1px solid #e0e0e0;
76 | padding: 1rem;
77 | margin-bottom: -1rem;
78 | border-radius: 0.3rem;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/frontend/src/utils/api.ts:
--------------------------------------------------------------------------------
1 | const BASE_URL = import.meta.env.VITE_API_URL;
2 |
3 | interface IRequestParams
9 |
10 |
11 |
12 |
13 |
11 |
12 |
24 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/networking/model/Connection.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.networking.model;
2 |
3 | import com.linkedin.backend.features.authentication.model.User;
4 | import jakarta.persistence.*;
5 | import jakarta.validation.constraints.NotNull;
6 | import org.hibernate.annotations.CreationTimestamp;
7 |
8 | import java.time.LocalDateTime;
9 |
10 | @Entity(name = "connections")
11 | public class Connection {
12 | @Id
13 | @GeneratedValue(strategy = GenerationType.IDENTITY)
14 | private Long id;
15 |
16 | @ManyToOne
17 | @JoinColumn(name = "author_id", nullable = false)
18 | private User author;
19 |
20 | @ManyToOne
21 | @JoinColumn(name = "recipient_id", nullable = false)
22 | private User recipient;
23 |
24 | @NotNull
25 | private Status status = Status.PENDING;
26 |
27 | private Boolean seen = false;
28 |
29 | @CreationTimestamp
30 | private LocalDateTime connectionDate;
31 |
32 | public Connection() {
33 | }
34 |
35 | public Connection(User author, User recipient) {
36 | this.author = author;
37 | this.recipient = recipient;
38 | }
39 |
40 | public Long getId() {
41 | return id;
42 | }
43 |
44 |
45 | public LocalDateTime getConnectionDate() {
46 | return connectionDate;
47 | }
48 |
49 | public void setConnectionDate(LocalDateTime connectionDate) {
50 | this.connectionDate = connectionDate;
51 | }
52 |
53 | public @NotNull Status getStatus() {
54 | return status;
55 | }
56 |
57 | public void setStatus(@NotNull Status status) {
58 | this.status = status;
59 | }
60 |
61 | public User getAuthor() {
62 | return author;
63 | }
64 |
65 | public void setAuthor(User author) {
66 | this.author = author;
67 | }
68 |
69 | public User getRecipient() {
70 | return recipient;
71 | }
72 |
73 | public void setRecipient(User recipient) {
74 | this.recipient = recipient;
75 | }
76 |
77 | public Boolean getSeen() {
78 | return seen;
79 | }
80 |
81 | public void setSeen(Boolean seen) {
82 | this.seen = seen;
83 | }
84 | }
--------------------------------------------------------------------------------
/frontend/src/features/networking/pages/Connections/Connections.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { request } from "../../../../utils/api";
3 | import { useAuthentication } from "../../../authentication/contexts/AuthenticationContextProvider";
4 | import { useWebSocket } from "../../../ws/WebSocketContextProvider";
5 | import { Connection, IConnection } from "../../components/Connection/Connection";
6 | import { Title } from "../../components/Title/Title";
7 | import classes from "./Connections.module.scss";
8 | export function Connections() {
9 | const [connexions, setConnections] = useState
25 |
51 | = 1024 || !creatingNewConversation ? "block" : "none",
29 | }}
30 | >
31 |
48 |
49 |
32 |
42 | Messaging
33 | 41 |
52 |
54 |
47 | Connections ({connexions.length})
48 |
49 | <>
50 | {connexions.map((connection) => (
51 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/feed/model/Comment.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.feed.model;
2 |
3 | import com.fasterxml.jackson.annotation.JsonIgnore;
4 | import com.linkedin.backend.features.authentication.model.User;
5 | import jakarta.persistence.*;
6 | import org.hibernate.annotations.CreationTimestamp;
7 |
8 | import java.time.LocalDateTime;
9 |
10 | @Entity(name = "comments")
11 | public class Comment {
12 |
13 | @Id
14 | @GeneratedValue(strategy = GenerationType.IDENTITY)
15 | private Long id;
16 | @ManyToOne
17 | @JoinColumn(name = "post_id", nullable = false)
18 | @JsonIgnore
19 | private Post post;
20 | @ManyToOne
21 | @JoinColumn(name = "author_id", nullable = false)
22 | private User author;
23 | @Column(nullable = false)
24 | private String content;
25 |
26 | @CreationTimestamp
27 | private LocalDateTime creationDate;
28 |
29 | private LocalDateTime updatedDate;
30 |
31 | public Comment() {
32 | }
33 |
34 | public Comment(Post post, User author, String content) {
35 | this.post = post;
36 | this.author = author;
37 | this.content = content;
38 | }
39 |
40 | @PreUpdate
41 | public void preUpdate() {
42 | this.updatedDate = LocalDateTime.now();
43 | }
44 |
45 | public Long getId() {
46 | return id;
47 | }
48 |
49 | public void setId(Long id) {
50 | this.id = id;
51 | }
52 |
53 | public Post getPost() {
54 | return post;
55 | }
56 |
57 | public void setPost(Post post) {
58 | this.post = post;
59 | }
60 |
61 | public User getAuthor() {
62 | return author;
63 | }
64 |
65 | public void setAuthor(User author) {
66 | this.author = author;
67 | }
68 |
69 | public String getContent() {
70 | return content;
71 | }
72 |
73 | public void setContent(String content) {
74 | this.content = content;
75 | }
76 |
77 | public LocalDateTime getCreationDate() {
78 | return creationDate;
79 | }
80 |
81 | public void setCreationDate(LocalDateTime creationDate) {
82 | this.creationDate = creationDate;
83 | }
84 |
85 | public LocalDateTime getUpdatedDate() {
86 | return updatedDate;
87 | }
88 |
89 | public void setUpdatedDate(LocalDateTime updatedDate) {
90 | this.updatedDate = updatedDate;
91 | }
92 | }
--------------------------------------------------------------------------------
/frontend/src/features/networking/pages/Network/Network.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | display: grid;
3 |
4 | .content {
5 | display: grid;
6 | gap: 1rem;
7 | }
8 |
9 | .suggestions,
10 | .sidebar {
11 | background-color: white;
12 | border-radius: 0.3rem;
13 | border: 1px solid #e0e0e0;
14 | padding: 1rem;
15 | }
16 |
17 | .sidebar {
18 | display: none;
19 |
20 | .buttons {
21 | display: grid;
22 | gap: 0.4rem;
23 | }
24 |
25 | a {
26 | display: flex;
27 | align-items: center;
28 | gap: 0.5rem;
29 |
30 | &:not(:last-child) {
31 | border-bottom: 1px solid #e0e0e0;
32 | margin-bottom: 0.5rem;
33 | padding-bottom: 0.5rem;
34 | }
35 |
36 | &.active {
37 | color: var(--primary-color);
38 | }
39 | }
40 |
41 | svg {
42 | width: 1.5rem;
43 | height: 1.5rem;
44 | }
45 |
46 | .stat {
47 | margin-left: auto;
48 | font-weight: bold;
49 | width: 2rem;
50 | height: 2rem;
51 | border-radius: 50%;
52 | display: flex;
53 | justify-content: center;
54 | align-items: center;
55 | background-color: #f5f5f5;
56 | }
57 | }
58 |
59 | .suggestions {
60 | .list {
61 | display: grid;
62 | gap: 1rem;
63 | grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
64 | }
65 |
66 | .suggestion {
67 | border-radius: 0.3rem;
68 | border: 1px solid #e0e0e0;
69 | text-align: center;
70 | font-size: 0.9rem;
71 |
72 | .cover {
73 | margin-bottom: -3rem;
74 | height: 5rem;
75 | width: 100%;
76 | }
77 |
78 | .avatar {
79 | width: 6rem;
80 | height: 6rem;
81 | border-radius: 50%;
82 | margin-inline: auto;
83 | }
84 |
85 | .info {
86 | padding: 1rem;
87 | }
88 |
89 | .name {
90 | font-weight: bold;
91 | }
92 |
93 | .connect {
94 | width: max-content;
95 | margin: 0.5rem auto;
96 | }
97 | }
98 | }
99 |
100 | @media screen and (width >= 1024px) {
101 | grid-template-columns: 20rem 1fr;
102 | gap: 1rem;
103 | align-items: flex-start;
104 |
105 | .sidebar {
106 | display: block;
107 | height: max-content;
108 | }
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/messaging/controller/MessagingController.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.messaging.controller;
2 |
3 | import com.linkedin.backend.dto.Response;
4 | import com.linkedin.backend.features.authentication.model.User;
5 | import com.linkedin.backend.features.messaging.dto.MessageDto;
6 | import com.linkedin.backend.features.messaging.model.Conversation;
7 | import com.linkedin.backend.features.messaging.model.Message;
8 | import com.linkedin.backend.features.messaging.service.MessagingService;
9 | import org.springframework.web.bind.annotation.*;
10 |
11 | import java.util.List;
12 |
13 | @RestController
14 | @RequestMapping("/api/v1/messaging")
15 | public class MessagingController {
16 | private final MessagingService messagingService;
17 |
18 | public MessagingController(MessagingService messagingService) {
19 | this.messagingService = messagingService;
20 | }
21 |
22 | @GetMapping("/conversations")
23 | public ListNo connections yet.
}
59 |
60 |
46 |
47 | setAuthUser(user)} />
48 | setAuthUser(user)} />
49 |
64 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/components/Search/Search.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { IUser } from "../../../../features/authentication/contexts/AuthenticationContextProvider";
4 | import { request } from "../../../../utils/api";
5 | import { Input } from "../../../Input/Input";
6 | import classes from "./Search.module.scss";
7 |
8 | export function Search() {
9 | const [searchTerm, setSearchTerm] = useState("");
10 | const [suggestions, setSuggestions] = useState
52 |
55 | Experience
53 |TODO
54 |
56 |
59 | Education
57 |TODO
58 |
60 |
63 | Skills
61 |TODO
62 |
65 |
67 |
32 | setSearchTerm(e.target.value)}
34 | placeholder="Search for connections"
35 | size="medium"
36 | value={searchTerm}
37 | />
38 | {suggestions.length > 0 && (
39 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/frontend/src/features/profile/pages/Posts/Posts.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useParams } from "react-router-dom";
3 | import { Loader } from "../../../../components/Loader/Loader";
4 | import { usePageTitle } from "../../../../hooks/usePageTitle";
5 | import { request } from "../../../../utils/api";
6 | import {
7 | IUser,
8 | useAuthentication,
9 | } from "../../../authentication/contexts/AuthenticationContextProvider";
10 | import { LeftSidebar } from "../../../feed/components/LeftSidebar/LeftSidebar";
11 | import { IPost, Post } from "../../../feed/components/Post/Post";
12 | import { RightSidebar } from "../../../feed/components/RightSidebar/RightSidebar";
13 | import classes from "./Posts.module.scss";
14 | export function Posts() {
15 | const { id } = useParams();
16 | const [posts, setPosts] = useState-
40 | {suggestions.map((user) => (
41 |
- 42 | 60 | 61 | ))} 62 |
50 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/notifications/model/Notification.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.notifications.model;
2 |
3 | import java.time.LocalDateTime;
4 |
5 | import org.hibernate.annotations.CreationTimestamp;
6 |
7 | import com.linkedin.backend.features.authentication.model.User;
8 |
9 | import jakarta.persistence.Entity;
10 | import jakarta.persistence.GeneratedValue;
11 | import jakarta.persistence.GenerationType;
12 | import jakarta.persistence.Id;
13 | import jakarta.persistence.ManyToOne;
14 |
15 | @Entity
16 | public class Notification {
17 | @Id
18 | @GeneratedValue(strategy = GenerationType.IDENTITY)
19 | private Long id;
20 | @ManyToOne
21 | private User recipient;
22 | @ManyToOne
23 | private User actor;
24 | private boolean isRead;
25 | private NotificationType type;
26 | private Long resourceId;
27 |
28 | @CreationTimestamp
29 | private LocalDateTime creationDate;
30 |
31 | public Notification(User actor, User recipient, NotificationType type, Long resourceId) {
32 | this.actor = actor;
33 | this.recipient = recipient;
34 | this.type = type;
35 | this.isRead = false;
36 | this.resourceId = resourceId;
37 | }
38 |
39 | public Notification() {
40 |
41 | }
42 |
43 | public Long getId() {
44 | return id;
45 | }
46 |
47 | public void setId(Long id) {
48 | this.id = id;
49 | }
50 |
51 | public boolean isRead() {
52 | return isRead;
53 | }
54 |
55 | public void setRead(boolean read) {
56 | isRead = read;
57 | }
58 |
59 | public User getRecipient() {
60 | return recipient;
61 | }
62 |
63 | public void setRecipient(User recipient) {
64 | this.recipient = recipient;
65 | }
66 |
67 | public User getActor() {
68 | return actor;
69 | }
70 |
71 | public void setActor(User actor) {
72 | this.actor = actor;
73 | }
74 |
75 | public NotificationType getType() {
76 | return type;
77 | }
78 |
79 | public void setType(NotificationType type) {
80 | this.type = type;
81 | }
82 |
83 | public Long getResourceId() {
84 | return resourceId;
85 | }
86 |
87 | public void setResourceId(Long resourceId) {
88 | this.resourceId = resourceId;
89 | }
90 |
91 | public LocalDateTime getCreationDate() {
92 | return creationDate;
93 | }
94 |
95 | public void setCreationDate(LocalDateTime creationDate) {
96 | this.creationDate = creationDate;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/networking/controller/ConnectionController.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.networking.controller;
2 |
3 | import com.linkedin.backend.features.authentication.model.User;
4 | import com.linkedin.backend.features.networking.model.Connection;
5 | import com.linkedin.backend.features.networking.model.Status;
6 | import com.linkedin.backend.features.networking.service.ConnectionService;
7 | import org.springframework.web.bind.annotation.*;
8 |
9 | import java.util.List;
10 |
11 | @RestController
12 | @RequestMapping("/api/v1/networking")
13 | public class ConnectionController {
14 | private final ConnectionService connectionService;
15 |
16 | public ConnectionController(ConnectionService connectionService) {
17 | this.connectionService = connectionService;
18 | }
19 |
20 | @GetMapping("/connections")
21 | public List
51 |
53 |
54 |
64 | {user?.firstName + " " + user?.lastName + "'s posts"}
55 | {posts.map((post) => ( 56 |
60 |
62 | )}
63 | No post to display.
61 |
65 |
67 |
55 | {conversations.map((conversation) => {
56 | return
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/Header.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | border: 1px solid #e0e0e0;
3 | background-color: white;
4 | color: rgb(0 0 0 / 60%);
5 | font-size: 0.9rem;
6 | position: sticky;
7 | top: 0;
8 | z-index: 100;
9 |
10 | .container {
11 | max-width: 74rem;
12 | padding-inline: 1rem;
13 | margin: 0 auto;
14 | width: 100%;
15 | display: grid;
16 | grid-template-columns: 1fr auto;
17 | position: relative;
18 | gap: 2rem;
19 | }
20 |
21 | .logo {
22 | width: 3rem;
23 | height: 3rem;
24 | fill: var(--primary-color);
25 | }
26 |
27 | .left {
28 | display: grid;
29 | gap: 1rem;
30 | grid-template-columns: auto 1fr;
31 | align-items: center;
32 | }
33 |
34 | .right {
35 | display: flex;
36 | align-items: center;
37 | gap: 1rem;
38 | }
39 |
40 | ul.navigation {
41 | position: absolute;
42 | top: 5rem;
43 | right: 1rem;
44 | background-color: white;
45 | border: 1px solid #e0e0e0;
46 | border-radius: 0.3rem;
47 | padding: 1rem;
48 | width: min(18rem, 100%);
49 | display: grid;
50 | gap: 0.5rem;
51 | }
52 |
53 | a {
54 | display: flex;
55 | align-items: center;
56 | gap: 1rem;
57 |
58 | &:hover {
59 | color: black;
60 | }
61 | }
62 |
63 | .active {
64 | color: var(--primary-color);
65 | }
66 |
67 | svg {
68 | width: 1.5rem;
69 | height: 1.5rem;
70 | }
71 |
72 | .toggle {
73 | display: flex;
74 | flex-direction: column;
75 | align-items: center;
76 | }
77 |
78 | .notifications,
79 | .messaging,
80 | .network {
81 | position: relative;
82 | }
83 |
84 | .badge {
85 | position: absolute;
86 | top: -0.5rem;
87 | left: 0.5rem;
88 | background-color: crimson;
89 | color: white;
90 | border-radius: 50%;
91 | font-size: 0.6rem;
92 | width: 1rem;
93 | height: 1rem;
94 | display: grid;
95 | place-items: center;
96 | }
97 |
98 | @media screen and (width >= 1080px) {
99 | .left {
100 | grid-template-columns: auto 0.7fr 0.3fr;
101 | }
102 |
103 | .right {
104 | gap: 2rem;
105 |
106 | ul a {
107 | flex-direction: column;
108 | gap: 0;
109 | }
110 |
111 | ul.navigation {
112 | position: relative;
113 | display: flex;
114 | align-items: center;
115 | width: auto;
116 | gap: 2rem;
117 | background-color: transparent;
118 | border: none;
119 | top: 0;
120 | right: 0;
121 | padding: 0;
122 | }
123 |
124 | .toggle {
125 | display: none;
126 | }
127 | }
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/frontend/src/features/authentication/hooks/useOauth.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
3 | import { useAuthentication } from "../contexts/AuthenticationContextProvider";
4 |
5 | const GOOGLE_OAUTH2_CLIENT_ID = import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID;
6 | const VITE_GOOGLE_OAUTH_URL = import.meta.env.VITE_GOOGLE_OAUTH_URL;
7 |
8 | export function useOauth(page: "login" | "signup") {
9 | const [searchParams, setSearchParams] = useSearchParams();
10 | const navigate = useNavigate();
11 | const location = useLocation();
12 | const { ouathLogin } = useAuthentication();
13 | const code = searchParams.get("code");
14 | const state = searchParams.get("state");
15 | const error = searchParams.get("error");
16 | const [isOauthInProgress, setIsOauthInProgress] = useState(code !== null || error !== null);
17 | const [oauthError, setOauthError] = useState("");
18 |
19 | useEffect(() => {
20 | async function fetchData() {
21 | if (error) {
22 | if (error === "access_denied") {
23 | setOauthError("You denied access to your Google account.");
24 | } else {
25 | setOauthError("An unknown error occurred.");
26 | }
27 | setIsOauthInProgress(false);
28 | setSearchParams({});
29 | return;
30 | }
31 |
32 | if (!code || !state) return;
33 |
34 | const { destination, antiForgeryToken } = JSON.parse(state);
35 |
36 | if (antiForgeryToken !== "n6kibcv2ov") {
37 | setOauthError("Invalid state parameter.");
38 | setIsOauthInProgress(false);
39 | setSearchParams({});
40 | return;
41 | }
42 |
43 | try {
44 | setTimeout(async () => {
45 | await ouathLogin(code, page);
46 | setIsOauthInProgress(false);
47 | setSearchParams({});
48 | navigate(destination || "/");
49 | }, 1000);
50 | } catch (error) {
51 | if (error instanceof Error) {
52 | setOauthError(error.message);
53 | } else {
54 | setOauthError("An unknown error occurred.");
55 | }
56 | setIsOauthInProgress(false);
57 | setSearchParams({});
58 | }
59 | }
60 | fetchData();
61 | }, [code, error, navigate, ouathLogin, page, setSearchParams, state]);
62 |
63 | return {
64 | isOauthInProgress,
65 | oauthError,
66 | startOauth: () => {
67 | const redirectUri = `${window.location.origin}/authentication/${page}`;
68 | window.location.href = `${VITE_GOOGLE_OAUTH_URL}?client_id=${GOOGLE_OAUTH2_CLIENT_ID}&redirect_uri=${redirectUri}&scope=openid+email+profile&response_type=code&state=${JSON.stringify(
69 | { antiForgeryToken: "n6kibcv2ov", destination: location.state?.from || "/" }
70 | )}`;
71 | },
72 | };
73 | }
74 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/messaging/model/Message.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.messaging.model;
2 |
3 | import java.time.LocalDateTime;
4 |
5 | import org.hibernate.annotations.CreationTimestamp;
6 |
7 | import com.fasterxml.jackson.annotation.JsonIgnore;
8 | import com.linkedin.backend.features.authentication.model.User;
9 |
10 | import jakarta.persistence.Entity;
11 | import jakarta.persistence.GeneratedValue;
12 | import jakarta.persistence.GenerationType;
13 | import jakarta.persistence.Id;
14 | import jakarta.persistence.ManyToOne;
15 |
16 | @Entity(name = "messages")
17 | public class Message {
18 | @Id
19 | @GeneratedValue(strategy = GenerationType.IDENTITY)
20 | private Long id;
21 |
22 | @ManyToOne(optional = false)
23 | private User sender;
24 |
25 | @ManyToOne(optional = false)
26 | private User receiver;
27 |
28 | @JsonIgnore
29 | @ManyToOne(optional = false)
30 | private Conversation conversation;
31 |
32 | private String content;
33 | private Boolean isRead = false;
34 |
35 | @CreationTimestamp
36 | private LocalDateTime createdAt;
37 |
38 | public Message() {
39 | }
40 |
41 | public Message(User sender, User receiver, Conversation conversation, String content) {
42 | this.sender = sender;
43 | this.receiver = receiver;
44 | this.conversation = conversation;
45 | this.content = content;
46 | this.isRead = false;
47 | }
48 |
49 | public void setId(Long id) {
50 | this.id = id;
51 | }
52 |
53 | public Long getId() {
54 | return id;
55 | }
56 |
57 | public User getReceiver() {
58 | return receiver;
59 | }
60 |
61 | public void setReceiver(User receiver) {
62 | this.receiver = receiver;
63 | }
64 |
65 | public User getSender() {
66 | return sender;
67 | }
68 |
69 | public void setSender(User sender) {
70 | this.sender = sender;
71 | }
72 |
73 | public String getContent() {
74 | return content;
75 | }
76 |
77 | public void setContent(String content) {
78 | this.content = content;
79 | }
80 |
81 | public LocalDateTime getCreatedAt() {
82 | return createdAt;
83 | }
84 |
85 | public void setCreatedAt(LocalDateTime createdAt) {
86 | this.createdAt = createdAt;
87 | }
88 |
89 | public Boolean getIsRead() {
90 | return isRead;
91 | }
92 |
93 | public void setIsRead(Boolean read) {
94 | isRead = read;
95 | }
96 |
97 | public Conversation getConversation() {
98 | return conversation;
99 | }
100 |
101 | public void setConversation(Conversation conversation) {
102 | this.conversation = conversation;
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/frontend/src/features/messaging/components/Conversations/components/Conversation/Conversation.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useNavigate, useParams } from "react-router-dom";
3 | import { useAuthentication } from "../../../../../authentication/contexts/AuthenticationContextProvider";
4 | import { useWebSocket } from "../../../../../ws/WebSocketContextProvider";
5 | import { IConversation } from "../../Conversations";
6 | import classes from "./Conversation.module.scss";
7 |
8 | interface ConversationItemProps {
9 | conversation: IConversation;
10 | }
11 |
12 | export function Conversation(props: ConversationItemProps) {
13 | const { user } = useAuthentication();
14 | const navigate = useNavigate();
15 | const { id } = useParams();
16 | const ws = useWebSocket();
17 | const [conversation, setConversation] = useState
65 | No conversation to display.
66 |
67 | )}
68 | 
2 |
3 | ## Running the project on your machine
4 |
5 | ### Prerequisites
6 |
7 | Node.js (version 22 or compatible), npm (version 10 or compatible),
8 | Java JDK (version 21), and Docker (version 24.0.7 or compatible).
9 |
10 | #### Backend Setup
11 |
12 | Navigate to the backend directory:
13 |
14 | ```
15 | cd backend
16 | ```
17 |
18 | Run the docker containers:
19 |
20 | ```
21 | docker-compose up
22 | ```
23 |
24 | Set up continuous build:
25 |
26 | _Mac/Linux:_
27 |
28 | ```
29 | ./gradlew build -t -x test
30 | ```
31 |
32 | _Windows:_
33 |
34 | ```
35 | gradlew.bat build -t -x test
36 | ```
37 |
38 | Configure environment variables for OAuth 2.0 and OIDC, aka the Continue with Google button. Skip if you do not want to test this feature:
39 |
40 | _Mac/Linux:_
41 |
42 | ```
43 | export OAUTH_GOOGLE_CLIENT_ID=your_google_client_id
44 | export OAUTH_GOOGLE_CLIENT_SECRET=your_google_client_secret
45 | ```
46 |
47 | _Windows:_
48 |
49 | ```
50 | set OAUTH_GOOGLE_CLIENT_ID=your_google_client_id
51 | set OAUTH_GOOGLE_CLIENT_SECRET=your_google_client_secret
52 | ```
53 |
54 | Run the backend:
55 |
56 | _Mac/Linux:_
57 |
58 | ```
59 | ./gradlew bootRun
60 | ```
61 |
62 | _Windows:_
63 |
64 | ```
65 | gradlew.bat bootRun
66 | ```
67 |
68 | #### Frontend Setup
69 |
70 | Navigate to the frontend directory:
71 |
72 | ```
73 | cd frontend
74 | ```
75 |
76 | Set up the necessary environment variables:
77 |
78 | _Mac/Linux:_
79 |
80 | ```
81 | cp .env.example .env
82 | ```
83 |
84 | _Windows:_
85 |
86 | ```
87 | copy .env.example .env
88 | ```
89 |
90 | ⚠️: make sure all variables are populated. Leave `VITE_GOOGLE_OAUTH_CLIENT_ID` as is if you do not want to test Oauth 2.0 and OIDC.
91 |
92 | Install dependencies:
93 |
94 | ```
95 | npm install
96 | ```
97 |
98 | Run the frontend in development mode:
99 |
100 | ```
101 | npm run dev
102 | ```
103 |
104 | You can access the backend at `http://localhost:8080`, the frontend at `http://localhost:5173`, and the Mailhog SMTP server UI at `http://localhost:8025`.
105 |
106 | The database hostname is `127.0.0.1`, the port is `3306`, and the root password is `root`.
107 |
108 | ### Github Actions
109 |
110 | To test the CI/CD workflows locally, you can use the `act` tool. First, ensure you have `act` installed. Then, create a file named `event.json` with the following content (to simulate modifications to both frontend and backend):
111 |
112 | ```json
113 | {
114 | "repository": {
115 | "default_branch": "main"
116 | },
117 | "push": {
118 | "base_ref": "refs/heads/main",
119 | "commits": [
120 | {
121 | "modified": ["frontend/some-file.js", "backend/some-file.java"]
122 | }
123 | ]
124 | }
125 | }
126 | ```
127 |
128 | Run the following command to simulate a push event:
129 |
130 | ```
131 | act -e event.json
132 | ```
133 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/storage/service/StorageService.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.storage.service;
2 |
3 | import java.io.FileInputStream;
4 | import java.io.IOException;
5 | import java.nio.file.Files;
6 | import java.nio.file.Path;
7 | import java.nio.file.Paths;
8 | import java.util.UUID;
9 |
10 | import org.springframework.http.MediaType;
11 | import org.springframework.stereotype.Service;
12 | import org.springframework.web.multipart.MultipartFile;
13 |
14 | @Service
15 | public class StorageService {
16 | private final Path rootLocation = Paths.get("uploads");
17 |
18 | public StorageService() {
19 | if (!rootLocation.toFile().exists()) {
20 | rootLocation.toFile().mkdir();
21 | }
22 | }
23 |
24 | public String saveImage(MultipartFile file) throws IOException {
25 | if (!isImage(file.getContentType())) {
26 | throw new IllegalArgumentException("File is not an image");
27 | }
28 |
29 | if (isFileTooLarge(file)) {
30 | throw new IllegalArgumentException("File is too large");
31 | }
32 |
33 | String fileExtension = getFileExtension(file.getOriginalFilename());
34 | String fileName = UUID.randomUUID() + fileExtension;
35 | Files.copy(file.getInputStream(), this.rootLocation.resolve(fileName));
36 | return fileName;
37 | }
38 |
39 | public FileInputStream getFileInputStream(String filename) throws IOException {
40 | Path file = rootLocation.resolve(filename);
41 |
42 | if (!file.getParent().equals(rootLocation)) { // Prevent directory traversal
43 | throw new IllegalArgumentException("Invalid file path");
44 | }
45 |
46 | if (!file.toFile().exists()) {
47 | throw new IllegalArgumentException("File not found");
48 | }
49 |
50 | return new FileInputStream(file.toFile());
51 | }
52 |
53 | public void deleteFile(String fileName) throws IOException {
54 | Path file = rootLocation.resolve(fileName);
55 | Files.delete(file);
56 | }
57 |
58 | public MediaType getMediaType(String filename) {
59 | String extension = getFileExtension(filename);
60 | switch (extension) {
61 | case ".png":
62 | return MediaType.IMAGE_PNG;
63 | case ".jpg":
64 | case ".jpeg":
65 | return MediaType.IMAGE_JPEG;
66 | case ".gif":
67 | return MediaType.IMAGE_GIF;
68 | default:
69 | return MediaType.APPLICATION_OCTET_STREAM;
70 | }
71 | }
72 |
73 | private String getFileExtension(String filename) {
74 | return filename.substring(filename.lastIndexOf("."));
75 | }
76 |
77 | private boolean isImage(String contentType) {
78 | return contentType.startsWith("image");
79 | }
80 |
81 | private boolean isFileTooLarge(MultipartFile file) {
82 | return file.getSize() > 10 * 1024 * 1024; // 10MB
83 | }
84 |
85 | }
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/Post/Post.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | background-color: white;
3 | border-radius: 0.3rem;
4 | border: 1px solid #e0e0e0;
5 | margin-bottom: 1rem;
6 | position: relative;
7 |
8 | .top {
9 | display: flex;
10 | gap: 1rem;
11 | align-items: flex-start;
12 | font-size: 0.9rem;
13 | padding: 1rem;
14 | justify-content: space-between;
15 |
16 | .avatar {
17 | width: 4rem;
18 | min-width: 4rem;
19 | height: 4rem;
20 | border-radius: 50%;
21 | }
22 |
23 | .name {
24 | font-weight: bold;
25 | }
26 |
27 | .name,
28 | .title,
29 | .date {
30 | display: -webkit-box;
31 | -webkit-line-clamp: 1;
32 | line-clamp: 1;
33 | -webkit-box-orient: vertical;
34 | overflow: hidden;
35 | text-overflow: ellipsis;
36 | }
37 | }
38 |
39 | .author {
40 | display: flex;
41 | gap: 0.5rem;
42 | align-items: center;
43 | }
44 |
45 | .picture {
46 | width: 100%;
47 | }
48 |
49 | .actions {
50 | display: flex;
51 | gap: 1rem;
52 | justify-content: space-between;
53 | padding: 1rem;
54 | border-top: 1px solid #e0e0e0;
55 |
56 | button {
57 | display: flex;
58 | align-items: center;
59 | gap: 0.5rem;
60 | font-size: 0.9rem;
61 |
62 | svg {
63 | width: 1rem;
64 | height: 1rem;
65 | }
66 |
67 | &.active {
68 | color: var(--primary-color);
69 | }
70 |
71 | &[disabled] {
72 | cursor: wait;
73 | }
74 | }
75 | }
76 |
77 | .comments {
78 | padding: 0 1rem 1rem;
79 | border-top: 1px solid #e0e0e0;
80 | }
81 |
82 | button.toggle {
83 | background-color: transparent;
84 | width: 1.5rem;
85 | height: 1.5rem;
86 | border-radius: 50%;
87 | display: grid;
88 | place-items: center;
89 | transition: 0.3s;
90 |
91 | &:hover,
92 | &.active {
93 | background-color: #e0e0e0;
94 | }
95 |
96 | svg {
97 | width: 0.8rem;
98 | height: 0.8rem;
99 | }
100 | }
101 |
102 | .menu {
103 | position: absolute;
104 | right: 1.2rem;
105 | top: 2.7rem;
106 | display: flex;
107 | flex-direction: column;
108 | align-items: flex-start;
109 | background-color: #e0e0e0;
110 | border-radius: 0.3rem;
111 | padding: 0.5rem;
112 | font-size: 0.8rem;
113 | gap: 0.5rem;
114 |
115 | button {
116 | width: 100%;
117 | text-align: left;
118 | }
119 |
120 | button:not(:last-child) {
121 | border-bottom: 1px solid #ccc;
122 | padding-bottom: 0.3rem;
123 | }
124 | }
125 |
126 | .content {
127 | padding: 0 1rem 1rem;
128 | }
129 |
130 | .stats {
131 | display: flex;
132 | justify-content: space-between;
133 | align-items: center;
134 |
135 | .stat {
136 | padding: 0.3rem 1rem;
137 | font-size: 0.8rem;
138 | }
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/frontend/public/logo-dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/features/authentication/pages/VerifyEmail/VerifyEmail.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "../../../../components/Button/Button";
2 | import { Input } from "../../../../components/Input/Input";
3 | import { usePageTitle } from "../../../../hooks/usePageTitle";
4 | import { Box } from "../../components/Box/Box";
5 | import classes from "./VerifyEmail.module.scss";
6 |
7 | import { useState } from "react";
8 | import { useNavigate } from "react-router-dom";
9 | import { request } from "../../../../utils/api";
10 | import { useAuthentication } from "../../contexts/AuthenticationContextProvider";
11 |
12 | export function VerifyEmail() {
13 | const [errorMessage, setErrorMessage] = useState("");
14 | const { user, setUser } = useAuthentication();
15 | const [message, setMessage] = useState("");
16 | const [isLoading, setIsLoading] = useState(false);
17 | usePageTitle("Verify Email");
18 | const navigate = useNavigate();
19 |
20 | const validateEmail = async (code: string) => {
21 | setMessage("");
22 | await request
55 |
56 |
86 |
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/frontend/src/features/networking/pages/Invitations/Invitations.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { request } from "../../../../utils/api";
3 | import { useAuthentication } from "../../../authentication/contexts/AuthenticationContextProvider";
4 | import { useWebSocket } from "../../../ws/WebSocketContextProvider";
5 | import { Connection, IConnection } from "../../components/Connection/Connection";
6 | import { Title } from "../../components/Title/Title";
7 | import classes from "./Invitations.module.scss";
8 | export function Invitations() {
9 | const [connexions, setConnections] = useStateVerify your Email
57 | 58 | 85 |
60 | Invitations ({connexions.length})
61 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/backend/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 | @rem SPDX-License-Identifier: Apache-2.0
17 | @rem
18 |
19 | @if "%DEBUG%"=="" @echo off
20 | @rem ##########################################################################
21 | @rem
22 | @rem Gradle startup script for Windows
23 | @rem
24 | @rem ##########################################################################
25 |
26 | @rem Set local scope for the variables with windows NT shell
27 | if "%OS%"=="Windows_NT" setlocal
28 |
29 | set DIRNAME=%~dp0
30 | if "%DIRNAME%"=="" set DIRNAME=.
31 | @rem This is normally unused
32 | set APP_BASE_NAME=%~n0
33 | set APP_HOME=%DIRNAME%
34 |
35 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
36 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
37 |
38 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
39 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
40 |
41 | @rem Find java.exe
42 | if defined JAVA_HOME goto findJavaFromJavaHome
43 |
44 | set JAVA_EXE=java.exe
45 | %JAVA_EXE% -version >NUL 2>&1
46 | if %ERRORLEVEL% equ 0 goto execute
47 |
48 | echo. 1>&2
49 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
50 | echo. 1>&2
51 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2
52 | echo location of your Java installation. 1>&2
53 |
54 | goto fail
55 |
56 | :findJavaFromJavaHome
57 | set JAVA_HOME=%JAVA_HOME:"=%
58 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
59 |
60 | if exist "%JAVA_EXE%" goto execute
61 |
62 | echo. 1>&2
63 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
64 | echo. 1>&2
65 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2
66 | echo location of your Java installation. 1>&2
67 |
68 | goto fail
69 |
70 | :execute
71 | @rem Setup the command line
72 |
73 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
74 |
75 |
76 | @rem Execute Gradle
77 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
78 |
79 | :end
80 | @rem End local scope for the variables with windows NT shell
81 | if %ERRORLEVEL% equ 0 goto mainEnd
82 |
83 | :fail
84 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
85 | rem the _cmd.exe /c_ return code!
86 | set EXIT_CODE=%ERRORLEVEL%
87 | if %EXIT_CODE% equ 0 set EXIT_CODE=1
88 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
89 | exit /b %EXIT_CODE%
90 |
91 | :mainEnd
92 | if "%OS%"=="Windows_NT" endlocal
93 |
94 | :omega
95 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/RightSidebar/RightSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useNavigate, useParams } from "react-router-dom";
3 | import { Button } from "../../../../components/Button/Button";
4 | import { Loader } from "../../../../components/Loader/Loader";
5 | import { request } from "../../../../utils/api";
6 | import { IUser } from "../../../authentication/contexts/AuthenticationContextProvider";
7 | import { IConnection } from "../../../networking/components/Connection/Connection";
8 | import classes from "./RightSidebar.module.scss";
9 | export function RightSidebar() {
10 | const [suggestions, setSuggestions] = useState
62 |
65 |
68 |
69 | {filtredConnections.map((connection) => (
70 | No invitation {sent ? "sent" : "received"} yet.
79 | )}
80 |
31 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/LeftSidebar/LeftSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { request } from "../../../../utils/api";
4 | import { IUser } from "../../../authentication/contexts/AuthenticationContextProvider";
5 | import { IConnection } from "../../../networking/components/Connection/Connection";
6 | import { useWebSocket } from "../../../ws/WebSocketContextProvider";
7 | import classes from "./LeftSidebar.module.scss";
8 | interface ILeftSidebarProps {
9 | user: IUser | null;
10 | }
11 | export function LeftSidebar({ user }: ILeftSidebarProps) {
12 | const [connections, setConnections] = useStateAdd to your connexions
32 |
33 | {suggestions.map((suggestion) => {
34 | return (
35 |
80 |
36 |
42 |
70 | );
71 | })}
72 |
73 | {suggestions.length === 0 && !loading && (
74 |
43 |
51 |
68 |
69 |
75 |
77 | )}
78 | {loading && No suggestions available at the moment.
76 |
50 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/frontend/src/features/messaging/components/Messages/components/Message/Message.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { request } from "../../../../../../utils/api";
3 | import { IUser } from "../../../../../authentication/contexts/AuthenticationContextProvider";
4 | import { TimeAgo } from "../../../../../feed/components/TimeAgo/TimeAgo";
5 | import { IMessage } from "../../Messages";
6 | import classes from "./Message.module.scss";
7 |
8 | interface IMessageProps {
9 | message: IMessage;
10 | user: IUser | null;
11 | }
12 |
13 | export function Message({ message, user }: IMessageProps) {
14 | const messageRef = useRef
51 | 
59 |
60 |
70 | {user?.firstName + " " + user?.lastName}
71 | {user?.position + " at " + user?.company}
72 |
73 | {/*
84 |
74 |
*/}
77 |
83 | Profile viewers
75 | 0
76 |
36 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/authentication/filter/AuthenticationFilter.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.authentication.filter;
2 |
3 | import com.linkedin.backend.features.authentication.model.User;
4 | import com.linkedin.backend.features.authentication.service.AuthenticationService;
5 | import com.linkedin.backend.features.authentication.utils.JsonWebToken;
6 | import jakarta.servlet.FilterChain;
7 | import jakarta.servlet.ServletException;
8 | import jakarta.servlet.http.HttpFilter;
9 | import jakarta.servlet.http.HttpServletRequest;
10 | import jakarta.servlet.http.HttpServletResponse;
11 | import org.springframework.stereotype.Component;
12 |
13 | import java.io.IOException;
14 | import java.util.Arrays;
15 | import java.util.List;
16 |
17 | @Component
18 | public class AuthenticationFilter extends HttpFilter {
19 | private final List
37 |
53 | {message.sender.id == user?.id && (
54 |
38 | 
43 |
51 |
44 |
50 |
45 | {message.sender.firstName} {message.sender.lastName}
46 |
47 |
48 | {message.content}
52 |
55 | {!message.isRead ? (
56 | <>
57 |
60 | Sent
61 |
62 | ) : (
63 | <>
64 |
67 | Read
68 |
69 | )}
70 |
71 | )}
72 |
29 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/frontend/src/features/authentication/pages/Login/Login.tsx:
--------------------------------------------------------------------------------
1 | import { FormEvent, useState } from "react";
2 | import { Link, useLocation, useNavigate } from "react-router-dom";
3 | import { Button } from "../../../../components/Button/Button";
4 | import { Input } from "../../../../components/Input/Input";
5 | import { Loader } from "../../../../components/Loader/Loader";
6 | import { usePageTitle } from "../../../../hooks/usePageTitle";
7 | import { Box } from "../../components/Box/Box";
8 | import { Seperator } from "../../components/Seperator/Seperator";
9 | import { useAuthentication } from "../../contexts/AuthenticationContextProvider";
10 | import { useOauth } from "../../hooks/useOauth";
11 | import classes from "./Login.module.scss";
12 |
13 | export function Login() {
14 | const [errorMessage, setErrorMessage] = useState("");
15 | const [isLoading, setIsLoading] = useState(false);
16 | const { login } = useAuthentication();
17 | const location = useLocation();
18 | const navigate = useNavigate();
19 | const { isOauthInProgress, oauthError, startOauth } = useOauth("login");
20 | usePageTitle("Login");
21 |
22 | const doLogin = async (e: FormEvent
30 |
31 |
34 | {type === "profile" ? (
35 |
73 | {type === "profile" ? "Changing profile picture" : "Changing cover picture"}
32 | 33 |
36 | 
37 |
38 | ) : (
39 |
40 |
41 |
42 | )}
43 |
50 |
51 |
61 |
66 |
71 |
72 |
49 |
50 | Or
68 |
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/frontend/src/features/profile/components/About/About.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Input } from "../../../../components/Input/Input";
3 | import { request } from "../../../../utils/api";
4 | import { IUser } from "../../../authentication/contexts/AuthenticationContextProvider";
5 | import classes from "./About.module.scss";
6 |
7 | interface AboutProps {
8 | user: IUser | null;
9 | authUser: IUser | null;
10 | onUpdate: (updatedUser: IUser) => void;
11 | }
12 |
13 | export function About({ user, authUser, onUpdate }: AboutProps) {
14 | const [editingAbout, setEditingAbout] = useState(false);
15 | const [aboutInput, setAboutInput] = useState(authUser?.about || "");
16 |
17 | async function updateAbout() {
18 | if (!user?.id) return;
19 |
20 | await requestSign in
51 |Stay updated on your professional world.
52 | 67 |
69 | {oauthError &&
83 | {oauthError}
} 70 | 81 | New to LinkedIn? Join now 82 |
33 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/frontend/src/features/authentication/pages/Signup/Signup.tsx:
--------------------------------------------------------------------------------
1 | import { FormEvent, useState } from "react";
2 | import { Link, useNavigate } from "react-router-dom";
3 | import { Button } from "../../../../components/Button/Button.tsx";
4 | import { Input } from "../../../../components/Input/Input.tsx";
5 | import { Loader } from "../../../../components/Loader/Loader.tsx";
6 | import { usePageTitle } from "../../../../hooks/usePageTitle.tsx";
7 | import { Box } from "../../components/Box/Box";
8 | import { Seperator } from "../../components/Seperator/Seperator";
9 | import { useAuthentication } from "../../contexts/AuthenticationContextProvider.tsx";
10 | import { useOauth } from "../../hooks/useOauth.ts";
11 | import classes from "./Signup.module.scss";
12 |
13 | export function Signup() {
14 | const [errorMessage, setErrorMessage] = useState("");
15 | const [isLoading, setIsLoading] = useState(false);
16 | const { signup } = useAuthentication();
17 | const navigate = useNavigate();
18 | usePageTitle("Signup");
19 | const { isOauthInProgress, oauthError, startOauth } = useOauth("signup");
20 | const doSignup = async (e: FormEvent
34 |
65 | {!editingAbout ? (
66 | About
35 | {authUser?.id === user?.id && ( 36 | <> 37 | {!editingAbout ? ( 38 | 43 | ) : ( 44 |
45 |
55 |
60 |
61 | )}
62 |
63 | )}
64 | {user?.about ? user.about : "No information provided."}
67 | ) : ( 68 | setAboutInput(e.target.value)} 71 | placeholder="Write something about yourself..." 72 | /> 73 | )} 74 |
45 |
46 | Or
68 | {oauthError &&
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/frontend/src/features/messaging/pages/Conversation/Conversation.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | display: grid;
3 | grid-template-rows: auto auto 1fr auto;
4 | height: calc(100vh - 12rem);
5 |
6 | &.new {
7 | height: calc(100vh - 8rem);
8 | grid-template-rows: auto 1fr auto;
9 | }
10 |
11 | .header {
12 | padding: 1rem;
13 | border-bottom: 1px solid #e0e0e0;
14 | }
15 |
16 | button.back {
17 | background-color: #f5f5f5;
18 | width: 2rem;
19 | height: 2rem;
20 | border-radius: 50%;
21 | transition: background-color 0.3s;
22 | display: grid;
23 | place-items: center;
24 |
25 | &:hover {
26 | background-color: #e0e0e0;
27 | }
28 | }
29 |
30 | .name {
31 | font-weight: bold;
32 | }
33 |
34 | .top {
35 | padding: 1rem;
36 | display: grid;
37 | align-items: center;
38 | grid-template-columns: 3rem 1fr;
39 | gap: 0.5rem;
40 | border-bottom: 1px solid #e0e0e0;
41 | border-radius: 0 0 0.3rem 0.3rem;
42 |
43 | .avatar {
44 | width: 3rem;
45 | height: 3rem;
46 | border-radius: 50%;
47 | }
48 | }
49 |
50 | .suggestions {
51 | max-height: 17rem;
52 | overflow-y: auto;
53 | border-radius: 0.3rem;
54 | border: 1px solid #e0e0e0;
55 |
56 | > button {
57 | display: flex;
58 | text-align: left;
59 | align-items: center;
60 | gap: 1rem;
61 | font-size: 0.8rem;
62 | width: 100%;
63 | padding: 0.5rem;
64 |
65 | &:not(:last-child) {
66 | border-bottom: 1px solid #e0e0e0;
67 | }
68 | }
69 | }
70 |
71 | .form {
72 | padding-inline: 1rem;
73 |
74 | .avatar {
75 | width: 3rem;
76 | height: 3rem;
77 | border-radius: 50%;
78 | }
79 |
80 | .top {
81 | font-size: 0.8rem;
82 | grid-template-columns: 3rem 1fr auto;
83 | padding-inline: 0;
84 | }
85 |
86 | .close {
87 | background-color: #f5f5f5;
88 | width: 2rem;
89 | height: 2rem;
90 | border-radius: 50%;
91 | transition: background-color 0.3s;
92 | display: grid;
93 | place-items: center;
94 |
95 | &:hover {
96 | background-color: #e0e0e0;
97 | }
98 | }
99 |
100 | &:not(.new) {
101 | position: relative;
102 |
103 | input {
104 | width: 100%;
105 | height: 4rem;
106 | padding: 1rem;
107 | border: 1px solid #e0e0e0;
108 | border-radius: 0.3rem;
109 | margin-bottom: 1rem;
110 | }
111 |
112 | button.send {
113 | position: absolute;
114 | right: 2rem;
115 | top: 40%;
116 | transform: translateY(-50%);
117 | width: 2rem;
118 | height: 2rem;
119 | border-radius: 50%;
120 | background-color: var(--primary-color);
121 | display: grid;
122 | place-items: center;
123 | color: white;
124 |
125 | svg {
126 | width: 1rem;
127 | height: 1rem;
128 | }
129 |
130 | &[disabled] {
131 | background-color: #e0e0e0;
132 | cursor: not-allowed;
133 | color: black;
134 | }
135 | }
136 | }
137 | }
138 |
139 | @media screen and (width >= 1024px) {
140 | grid-template-rows: auto 1fr auto;
141 | height: calc(100vh - 8rem);
142 |
143 | &.new {
144 | grid-template-rows: 1fr auto;
145 | }
146 |
147 | .header {
148 | display: none;
149 | }
150 |
151 | .welcome {
152 | padding: 1.5rem 2rem;
153 | }
154 | }
155 | }
156 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/components/Profile/Profile.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useEffect, useRef } from "react";
2 | import { Link, useNavigate } from "react-router-dom";
3 | import { useAuthentication } from "../../../../features/authentication/contexts/AuthenticationContextProvider";
4 | import { Button } from "../../../Button/Button";
5 | import classes from "./Profile.module.scss";
6 |
7 | interface IProfileProps {
8 | showProfileMenu: boolean;
9 | setShowNavigationMenu: DispatchSign up
47 |Make the most of your professional life.
48 | 67 |{oauthError}
} 69 | 80 |
81 | Already on LinkedIn? Sign in
82 |
83 |
35 |
57 |
58 | {showProfileMenu ? (
59 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/backend/src/main/java/com/linkedin/backend/features/feed/model/Post.java:
--------------------------------------------------------------------------------
1 | package com.linkedin.backend.features.feed.model;
2 |
3 | import java.time.LocalDateTime;
4 | import java.util.List;
5 | import java.util.Set;
6 |
7 | import com.fasterxml.jackson.annotation.JsonIgnore;
8 | import org.hibernate.annotations.CreationTimestamp;
9 |
10 | import com.linkedin.backend.features.authentication.model.User;
11 |
12 | import jakarta.persistence.CascadeType;
13 | import jakarta.persistence.Entity;
14 | import jakarta.persistence.GeneratedValue;
15 | import jakarta.persistence.GenerationType;
16 | import jakarta.persistence.Id;
17 | import jakarta.persistence.JoinColumn;
18 | import jakarta.persistence.JoinTable;
19 | import jakarta.persistence.ManyToMany;
20 | import jakarta.persistence.ManyToOne;
21 | import jakarta.persistence.OneToMany;
22 | import jakarta.persistence.PreUpdate;
23 | import jakarta.validation.constraints.NotEmpty;
24 |
25 | @Entity(name = "posts")
26 | public class Post {
27 |
28 | @Id
29 | @GeneratedValue(strategy = GenerationType.IDENTITY)
30 | private Long id;
31 | @NotEmpty
32 | private String content;
33 | private String picture;
34 | @ManyToOne
35 | @JoinColumn(name = "author_id", nullable = false)
36 | private User author;
37 | @JsonIgnore
38 | @ManyToMany
39 | @JoinTable(name = "posts_likes", joinColumns = @JoinColumn(name = "post_id"), inverseJoinColumns = @JoinColumn(name = "user_id"))
40 | private Set
60 |
98 | ) : null}
99 |
61 |
70 |
75 |
71 |
74 | {user?.firstName + " " + user?.lastName}
72 | {user?.position + " at " + user?.company}
73 |
76 |
87 | {
90 | e.preventDefault();
91 | logout();
92 | }}
93 | >
94 | Sign Out
95 |
96 |
97 |
34 | {!editing ? (
35 | <>
36 |
98 | );
99 | }
100 |
101 | export default Comment;
102 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/pages/Notifications/Notifications.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useEffect, useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { usePageTitle } from "../../../../hooks/usePageTitle";
4 | import { request } from "../../../../utils/api";
5 | import {
6 | IUser,
7 | useAuthentication,
8 | } from "../../../authentication/contexts/AuthenticationContextProvider";
9 | import { LeftSidebar } from "../../components/LeftSidebar/LeftSidebar";
10 | import { RightSidebar } from "../../components/RightSidebar/RightSidebar";
11 | import { TimeAgo } from "../../components/TimeAgo/TimeAgo";
12 | import classes from "./Notifications.module.scss";
13 |
14 | enum NotificationType {
15 | LIKE = "LIKE",
16 | COMMENT = "COMMENT",
17 | }
18 | export interface INotification {
19 | id: number;
20 | recipient: IUser;
21 | actor: IUser;
22 | read: boolean;
23 | type: NotificationType;
24 | resourceId: number;
25 | creationDate: string;
26 | }
27 |
28 | export function Notifications() {
29 | usePageTitle("Notifications");
30 | const [notifications, setNotifications] = useState
37 |
58 | {comment.author.id == user?.id && (
59 |
67 | )}
68 |
69 | {showActions && (
70 |
76 |
71 |
72 |
73 |
74 | )}
75 | {comment.content}
77 |
78 | ) : (
79 |
96 | )}
97 |
46 |
71 | );
72 | }
73 |
74 | function Notification({
75 | notification,
76 | setNotifications,
77 | }: {
78 | notification: INotification;
79 | setNotifications: Dispatch
47 |
49 |
50 | {notifications.map((notification) => (
51 |
67 | 63 | No notifications 64 |
65 | )} 66 |
68 |
70 |
60 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/frontend/public/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
4 | import { ApplicationLayout } from "./components/ApplicationLayout/ApplicationLayout";
5 | import { AuthenticationLayout } from "./features/authentication/components/AuthenticationLayout/AuthenticationLayout";
6 | import { AuthenticationContextProvider } from "./features/authentication/contexts/AuthenticationContextProvider";
7 | import { Login } from "./features/authentication/pages/Login/Login";
8 | import { Profile as LoginProfile } from "./features/authentication/pages/Profile/Profile";
9 | import { ResetPassword } from "./features/authentication/pages/ResetPassword/ResetPassword";
10 | import { Signup } from "./features/authentication/pages/Signup/Signup";
11 | import { VerifyEmail } from "./features/authentication/pages/VerifyEmail/VerifyEmail";
12 | import { Feed } from "./features/feed/pages/Feed/Feed";
13 | import { Notifications } from "./features/feed/pages/Notifications/Notifications";
14 | import { PostPage } from "./features/feed/pages/Post/Post";
15 | import { Conversation } from "./features/messaging/pages/Conversation/Conversation";
16 | import { Messaging } from "./features/messaging/pages/Messages/Messaging";
17 | import { Connections } from "./features/networking/pages/Connections/Connections";
18 | import { Invitations } from "./features/networking/pages/Invitations/Invitations";
19 | import { Network } from "./features/networking/pages/Network/Network";
20 | import { Posts } from "./features/profile/pages/Posts/Posts";
21 | import { Profile } from "./features/profile/pages/Profile/Profile";
22 | import "./index.scss";
23 |
24 | const router = createBrowserRouter([
25 | {
26 | element:
61 |
63 |
64 |
104 |
65 |
80 |
83 |
90 | {error && {error}
}
91 | {loading ? (
92 |
95 | {posts.map((post) => (
96 |
102 | )}
103 | Start connecting with poople to build a feed that matters to you.
100 | )} 101 |
105 |
107 |
49 |
50 |
120 |
121 | );
122 | }
123 |
--------------------------------------------------------------------------------
/frontend/src/features/feed/components/Modal/Modal.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, Dispatch, FormEvent, SetStateAction, useRef, useState } from "react";
2 | import { Button } from "../../../../components/Button/Button";
3 | import { Input } from "../../../../components/Input/Input";
4 | import classes from "./Modal.module.scss";
5 | interface IPostingMadalProps {
6 | showModal: boolean;
7 | content?: string;
8 | picture?: string;
9 | setShowModal: DispatchReset Password
51 | 52 | {!emailSent ? ( 53 | 82 | ) : ( 83 | 118 | )} 119 |
83 |
84 |
85 |
90 |