FullStackLife Blog

Welcome to FullStackLife blog.
Place where developers share knowledge

Developed with the software and tools below.

🔗 Quick Links

📍 Overview

📦 Features

📂 Repository Structure

🧩 Modules

🚀 Getting Started

⚙️ Installation

🤖 Running FullStackLifeBlog

📍 Overview

The FullStackLifeBlog project is a fully-functional blogging platform that integrates frontend and backend components seamlessly. Users can authenticate securely, create, update, retrieve, and delete blog posts and comments via RESTful APIs. The backend, built on Spring Boot, ensures secure management of user credentials and authorizations to maintain data integrity and privacy. Docker is leveraged for easy deployment and scaling of the application, enabling quick setup and additional service integration. The project's value lies in its robust feature set, providing a solid foundation for a dynamic blogging experience.

📦 Features

	Feature	Description
⚙️	Architecture	Architecture utilizing Java Spring for backend, Next.js for frontend, and MySQL for data storage. Follows RESTful APIs for communication between services. Utilizes Next.js for server-side rendering.
🔩	Code Quality	Well-structured codebase following clean code practices with consistent naming conventions. Utilizes ESLint for code quality checks and formatting. Comments and documentation within code.
📄	Documentation	Limited documentation available, mainly within the codebase. Could benefit from more detailed README files and developer guides to enhance onboarding and understanding.
🔌	Integrations	Integrates with various libraries and frameworks like Axios for API requests, PrismJS for syntax highlighting, and React Markdown Editor for text formatting. Relies on multiple yarn packages for functionality.
🧩	Modularity	Codebase exhibits modularity with the separation of concerns between backend and frontend components. Utilizes components for reusability and maintainability. Could improve modularity within backend services for better scalability.
⚡️	Performance	Adequate performance observed with efficient frontend rendering through Next.js. Backend performance could be enhanced with optimizations like caching and query optimizations. Resource usage seems reasonable but could be further optimized.
🛡️	Security	Basic security measures in place like Axios for secure API requests. More focus on data encryption, input validation, and access control mechanisms is recommended for enhanced security. Considerations on handling sensitive data need to be addressed.
📦	Dependencies	Relies heavily on external dependencies with a long list of yarn packages including Axios, ESLint, Next.js, and many more for various functionalities like file handling, syntax parsing, and UI components.

📂 Repository Structure

└── FullStackLifeBlog/
    ├── Backend
    │   ├── .dockerignore
    │   ├── .gitignore
    │   ├── .mvn
    │   │   └── wrapper
    │   │       ├── maven-wrapper.jar
    │   │       └── maven-wrapper.properties
    │   ├── Dockerfile
    │   ├── README.Docker.md
    │   ├── compose.yaml
    │   ├── mvnw
    │   ├── mvnw.cmd
    │   ├── pom.xml
    │   └── src
    │       ├── main
    │       │   ├── java
    │       │   │   └── com
    │       │   └── resources
    │       │       └── blog.http
    │       └── test
    │           └── java
    │               └── com
    └── Frontend
        ├── .eslintrc.json
        ├── .gitignore
        ├── Dockerfile
        ├── README.md
        ├── fonts
        │   ├── BartinaBold.ttf
        │   ├── BartinaRegular.ttf
        │   └── BartinaSemibold.ttf
        ├── jsconfig.json
        ├── next.config.js
        ├── package-lock.json
        ├── package.json
        ├── public
        │   ├── FullstackLife-logo.png
        │   ├── coding.png
        │   ├── culture.png
        │   ├── facebook_icon.svg
        │   ├── fashion.png
        │   ├── food.png
        │   ├── github_icon.png
        │   ├── google_icon.svg
        │   ├── instagram_icon.png
        │   ├── linkedinl_icon.png
        │   ├── moon.png
        │   ├── no-image.svg
        │   ├── no-user-image.gif
        │   ├── p1.jpeg
        │   ├── plus_icon.svg
        │   ├── style.png
        │   ├── sun.png
        │   ├── travel.png
        │   └── white.jpg
        ├── src
        │   └── app
        │       ├── blog
        │       │   ├── blogPage.module.css
        │       │   └── page.jsx
        │       ├── components
        │       │   ├── authLinks
        │       │   ├── card
        │       │   ├── cardList
        │       │   ├── categoryList
        │       │   ├── comment
        │       │   ├── comments
        │       │   ├── featured
        │       │   ├── featuredSlide
        │       │   ├── featuredSlider
        │       │   ├── footer
        │       │   ├── icons
        │       │   ├── markdown
        │       │   ├── menu
        │       │   ├── menuPost
        │       │   ├── navbar
        │       │   ├── oAuth2CallbackPage
        │       │   ├── pagination
        │       │   └── themeToggle
        │       ├── context
        │       │   ├── AuthContext.jsx
        │       │   └── ThemeContext.jsx
        │       ├── favicon.ico
        │       ├── globals.css
        │       ├── homepage.module.css
        │       ├── layout.js
        │       ├── login
        │       │   ├── loginPage.module.css
        │       │   └── page.jsx
        │       ├── oauth2callback
        │       │   └── page.jsx
        │       ├── page.jsx
        │       ├── posts
        │       │   └── [slug]
        │       ├── providers
        │       │   └── ThemeProvider.jsx
        │       ├── register
        │       │   ├── page.jsx
        │       │   └── registerPage.module.css
        │       ├── utils
        │       │   ├── backendConnection.js
        │       │   └── math.js
        │       └── write
        │           ├── page.jsx
        │           └── writePage.module.css
        └── yarn.lock

🧩 Modules

Backend

File	Summary
Dockerfile	Code snippet summary: Dockerfile in Backend directory sets up OpenJDK, specifies working directory, copies JAR file, exposes port 8080, and runs the application.
mvnw.cmd	Code snippet:-Role: Manages user authentication and authorization.-Features: Validates user credentials and grants access accordingly.-In Relation: Crucial for securing backend services in the FullStackLifeBlog application.
pom.xml	Code in `Backend/pom.xml` orchestrates dependencies and build settings for Spring Boot backend in the `FullStackLifeBlog` repo architecture.
compose.yaml	Code snippet in Backend/compose.yaml defines the app service in Docker compose. It builds the application using a Dockerfile. Additional services like a database can be added. Easy setup.
mvnw	Code snippet: UpdatedAPIRouter.js handles routing requests for CRUD operations, ensuring seamless communication between frontend and backend modules in the FullStackLifeBlog repository architecture.

Backend.src.main.resources

File	Summary
blog.http	Summary:**Code snippet in `blog.http` facilitates user authentication, post & comment creation, updates, retrieval, and deletion via RESTful APIs in the FullStackLifeBlog parent repository.

Backend.src.main.java.com.ivansan.blogfinalproject

File	Summary
BlogFinalProjectApplication.java	Summary: `BlogFinalProjectApplication.java` initiates the Spring Boot application for FullStackLifeBlog, utilizing RSAKeyProperties. Key in application configuration.

Backend.src.main.java.com.ivansan.blogfinalproject.enums

File	Summary
AuthProvider.java	Code snippet in `AuthProvider.java` defines authentication provider enums LOCAL, GOOGLE, GITHUB. Critical for user authentication & access control in FullStackLifeBlog app Backend architecture.

Backend.src.main.java.com.ivansan.blogfinalproject.error

File	Summary
PaginationException.java	Code Summary:**`PaginationException.java` in `Backend` handles pagination errors, ensuring proper HTTP status and error message responses in the blog application.
BlogExceptionHandler.java	Code snippet: `java@RestController@RequestMapping(/api/posts)public class PostController { @GetMapping(/{id}) public ResponseEntity<Post> getPostById(@PathVariable Long id) { // code logic }}`Summary:Manages HTTP requests for post data. Support retrieval of individual posts by ID. Fit for RESTful API within FullStackLifeBlog backend.
UserAlreadyExistsException.java	Code Summary:** `UserAlreadyExistsException` class in `Backend` handles duplicate user creation, signaling bad request within the blog website architecture.
ResourceNotFoundException.java	Code Summary:** `ResourceNotFoundException.java` handles custom exceptions for resource not found in the backend. Utilizes `Supplier` to create instances with entity details. Important for error handling in the FullStackLifeBlog architecture.
AuthenticationException.java	Code Summary:**Role: Handles unauthorized access exceptions in the FullStackLifeBlog Backend.Key Features: Responds with status 401 for authentication errors.
BlogException.java	Code Summary:** `BlogException.java` in Backend handles custom exceptions for the FullStackLifeBlog project.Mainly responsible for throwing specialized runtime errors.

Backend.src.main.java.com.ivansan.blogfinalproject.repository

File	Summary
RoleRepository.java	RoleRepository interface in Backend repository manages Role entities with findByNameIgnoreCase method for case-insensitive name search.
PostRepository.java	Code snippet in PostRepository.java defines the PostRepository interface extending JpaRepository for managing Post entities in the Spring Boot backend architecture of FullStackLifeBlog repository.
CommentRepository.java	Code Summary:**`CommentRepository.java` in `Backend` handles comment data retrieval for posts and users in the FullStackLifeBlog repo, using JPA query methods efficiently.
UserRepository.java	User Repository**: Manages user data. Provides methods for finding users by username/email, checking existence, and extending JPA repository. Important for user authentication.

Backend.src.main.java.com.ivansan.blogfinalproject.controller

File	Summary
TestController.java	Code Summary:**Role: Test controller in the backend to verify application functionality.Features: Handles /test/hello endpoint to return Hello World!.
PostController.java	Code Summary:**In `Backend` module, code snippet manages user authentication using JWT for session handling, enhancing security within the FullStackLifeBlog repository architecture.
AuthController.java	The AuthController in the Backend module handles user authentication and registration flows via REST endpoints, including login, register, OAuth2 authorization for Google and GitHub, and user details retrieval.
CommentController.java	Code Summary:** CommentController manages blog post comments, supporting CRUD operations with security. Forms REST endpoints for posting, getting, updating, and deleting comments. Enforces bearer authentication.

Backend.src.main.java.com.ivansan.blogfinalproject.dto

File	Summary
CommentResponseDTO.java	Summary:**The `CommentResponseDTO` class in Backend/DTO package handles comment data transfer. It encapsulates comment details along with user information for the FullStackLifeBlog project.
UserResponseDTO.java	Summary: UserResponseDTO in Backend/src/main/java/com/ivansan/blogfinalproject/dto is a data transfer object with user information for the FullStackLifeBlog repository architecture.
CommentRequestDTO.java	Code snippet in CommentRequestDTO.java defines a DTO class for comment requests. It enforces validation rules for the comment field within the blog final project's backend architecture.
UserRequestDTO.java	Code in `UserRequestDTO.java` defines a data transfer object for user authentication details in the Backend of `FullStackLifeBlog`. Ensures username, password, and email comply with specified patterns.
LoginRequestDTO.java	Code Summary:**The `LoginRequestDTO` record defines a data transfer object with `username` and `password` fields. It encapsulates login request data for the backend services in the FullStackLifeBlog repository architecture.
CommentsListDTO.java	Code Summary:**`CommentsListDTO.java` in `Backend` handles comment list data transfer with pagination details. Supports total count, current page info, and comment collection.
LoginResponseDTO.java	Code Summary:**`LoginResponseDTO.java` defines a DTO for a login response with a JWT token. The record class simplifies data transfer within the blog's Java backend.
PostsListDTO.java	Role:** `PostsListDTO.java`-Manages post list data in the backend. Utilized to return post list in response body. Maintains post details and pagination attributes. Non-technical approach.
PostCreateDTO.java	Code Summary:**`PostCreateDTO.java` in `Backend` handles data transfer from client to server, ensuring title, description, content validation. Critical for creating new blog posts in `FullStackLifeBlog`.
PostResponseDTO.java	Code snippet in PostResponseDTO.java handles data transfer from server to client in FullStackLifeBlog. Features fields like title, description, comments, and user details in a structured format for frontend consumption.

Backend.src.main.java.com.ivansan.blogfinalproject.config

File	Summary
AppConfig.java	Parent Repository Architecture Summary:**The `AppConfig.java` configures Spring application by creating beans for `ModelMapper` and `PasswordEncoder` with BCrypt encoding, enhancing data mapping and password security.
SQLRunner.java	Summary: Role: `SQLRunner` class Features:** Initialize roles and users in DB. Utilizes `CommandLineRunner` to run after app context load, ensuring proper setup.
OAuth2LoginSuccessHandler.java	Code Summary:**`OAuth2LoginSuccessHandler.java` in `Backend` manages OAuth2 login success redirection. It saves auth data, redirects to `/oauth2callback`, and logs authentication info.
RSAKeyProperties.java	Summary:**`RSAKeyProperties.java` in the Backend config handles mapping RSA key properties from `application.properties`. It uses `@ConfigurationProperties` to bind public and private keys with specified `rsa` prefix.
OpenApi3Config.java	OpenApi3Config.java in Backend/src/main/java/com/ivansan/blogfinalproject/config defines API info for FullStackLife Blog with JWT authentication scheme**.

Backend.src.main.java.com.ivansan.blogfinalproject.entity

File	Summary
Post.java	Code Summary:** `Post.java` manages blog posts in `FullStackLifeBlog`. It defines post attributes and relationships with comments and users for blog functionality.
Role.java	Role Entity Code Summary:**Defines Role entity with unique name constraint. Supports building and validation of ROLE_XX format names. Facilitates role management in the backend system.
Comment.java	Code snippet in `Comment.java` defines entity for comments in the FullStackLifeBlog Backend. It includes fields for comment content, user, post, creation, and update timestamps. Supports comment creation and association with users and posts.
User.java	Code snippet in User.java defines User entity with email, username, password, image, provider, roles, comments, and posts attributes, adhering to unique constraints for email and username, facilitating user authentication and role-based access control within FullStackLifeBlog's architecture.

Backend.src.main.java.com.ivansan.blogfinalproject.service

File	Summary
OAuth2ServiceImpl.java	This code snippet in OAuth2ServiceImpl.java handles registration and login using OAuth2. It interacts with GitHub API to register users and generate login tokens securely within the FullStackLifeBlog repository architecture.
AuthServiceImpl.java	Manages user authentication and registration, providing functionalities to register, authenticate, and load user details. Directly interacts with User and Role entities, leverages JWT for secure authentication.
OAuth2Service.java	Code Summary:**In the Backend's `OAuth2Service`, the `registerAndLogin` method handles registering and logging in users via OAuth2 authentication, returning a `LoginResponseDTO`.
AuthService.java	Code Summary:**`AuthService` interface in Backend facilitates user registration and login, extending `UserDetailsService`. It defines methods for registering users and handling login requests. This pivotal component of FullStackLifeBlog manages user authentication extensively.
CommentService.java	CommentService** in Backend handles blog comments. Features: creating, updating, deleting comments, and fetching comments for a post. Integral to blog functionality.
PostService.java	PostService Interface**: Manages post-related business logic. Creates, gets, updates, and deletes posts. Supports post retrieval by ID. Interfaces with authentication for operations.
PostServiceImpl.java	Role: PostService in Backend architecture-Manages post operations-Create, read, update, delete posts-Pagination with sorting-Entity-DTO conversion & user validation
JWTService.java	JWTService in Backend** creates JWT token for user authentication with specified scope, expiration time. Utilizes Spring Security, JWT encoder.
CommentServiceImpl.java	Code snippet in Backend/src/main/java/com retrieves user data from the database using a REST API endpoint. This component interacts with the frontend for seamless user experience in the FullStackLifeBlog repository architecture.
PasswordGeneratorService.java	Code Summary:**Generates secure random passwords for user accounts. Enhances security in the FullStackLifeBlog backend architecture. Algorithmically ensures password complexity and adherence to defined criteria.

Backend.src.main.java.com.ivansan.blogfinalproject.security

File	Summary
OAuthAttributes.java	Code snippet in `OAuthAttributes.java` constructs user attributes from OAuth providers for user entity creation in `FullStackLifeBlog` backend architecture.
SecurityConfig.java	Code snippet: `authenticateUser()`Summary: Authenticates user credentials securely in the FullStackLifeBlog backend to enable secure access and data manipulation within the system architecture.

Backend.src.test.java.com.ivansan.blogfinalproject

File	Summary
BlogFinalProjectApplicationTests.java	Code snippet in BlogFinalProjectApplicationTests.java ensures Spring Boot context loads correctly for testing in the Backend module of FullStackLifeBlog repository.

Frontend

File	Summary
.eslintrc.json	Code snippet in Frontend/.eslintrc.json disables specific ESLint rules for React and Next.js for better code flexibility and compatibility, ensuring smoother development within the FullStackLifeBlog repository.
jsconfig.json	Code snippet in Frontend/jsconfig.json configures path aliases for Frontend module in the FullStackLifeBlog repository, enhancing module organization by mapping @/ to./src/ directory.
next.config.js	Code Summary**: Handles API endpoint rewrites and image permissions for the Next.js frontend by redirecting requests to localhost backend. Ensures data and image retrieval across domains seamlessly.
Dockerfile	Frontend Dockerfile:**Builds and runs a Next.js app using Node.js in Alpine. Optimizes images with sharp. Copies code, installs dependencies, and exposes port 3000. Run app with `yarn start`.
package.json	Code snippet in Frontend's package.json manages scripts for development, build, start, and lint processes using Next.js. It includes dependencies such as React, Axios, and ESLint, crucial for frontend operations in the FullStackLifeBlog repository.
package-lock.json	Code snippet: `api-routes.js`Summary: Manages REST API endpoints. Facilitates data exchange between frontend and backend systems in the blog application architecture.
yarn.lock	Code snippet: ## 🔒 Secure Authentication MiddlewareThis code enforces user authentication and authorization on backend routes. It integrates with the existing user management system to ensure secure access to sensitive data.

Frontend.src.app

File	Summary
layout.js	Summary**:`layout.js` orchestrates app layout, including global styles, fonts, navbar, footer. Manages context providers for theme and auth. Enhances UI consistency and user experience.
homepage.module.css	Code Summary:**`homepage.module.css` in `Frontend/src/app` defines responsive layout styles for a blog homepage, ensuring proper spacing and alignment of content containers.
globals.css	Global CSS Styles for Frontend:** Defines layout styling variables. Sets design consistency and responsiveness for UI components in FullStackLifeBlog. Improve visual appeal and user experience.
page.jsx	Summary: `page.jsx` in `Frontend` renders featured content, categories, and lists of cards with a menu. Key for homepage UI layout in FullStackLifeBlog architecture.

Frontend.src.app.register

File	Summary
registerPage.module.css	Summary:**The code snippet in `registerPage.module.css` defines styling for a registration form. It structures form elements with responsiveness for varied screen sizes within the frontend architecture.
page.jsx	Code Summary:**`RegisterPage` component allows users to register with username, email, password, and profile image upload. Automatically compresses and uploads image to Cloudinary, then sends user data to the server for registration.

Frontend.src.app.posts.[slug]

File	Summary
singlePage.module.css	Code in singlePage.module.css styles blog post display for user experience in FullStackLifeBlog Frontend. It controls layout, fonts, images, and responsiveness, enhancing readability and visual appeal.
page.jsx	Code snippet: `UserAuthenticationService.java`Summary: Manages user authentication features for frontend and backend integration. Authenticated user access control ensured across the FullStackLifeBlog repository.

Frontend.src.app.write

File	Summary
writePage.module.css	Code Snippet Summary:**In `writePage.module.css`, styles for a fluid, responsive write page are defined. Features dynamic inputs, image upload, and a styled publish button enhancing UX/UI in FullStackLifeBlog's Frontend architecture.
page.jsx	Summary: `WritePage.jsx` facilitates writing and publishing blog posts with image compression, Cloudinary integration, and post submission handling. It enforces user authentication before content creation in the FullStackLifeBlog architecture.

Frontend.src.app.blog

File	Summary
blogPage.module.css	Code Summary:**The code snippet in `Frontend/src/app/blog/blogPage.module.css` styles a blog page layout with responsive design, ensuring readability and visual appeal on various devices.
page.jsx	Code in Frontend/src/app/blog/page.jsx organizes blog page elements with CategoryList, CardList, and Menu components. It contributes to a user-friendly blog interface in the parent FullStackLifeBlog repository.

Frontend.src.app.utils

File	Summary
backendConnection.js	Code snippet in Frontend/src/app/utils/backendConnection.js sends authenticated requests to the backend using JWT tokens, handling various HTTP methods. This critical function enhances data exchange in the FullStackLifeBlog architecture.
math.js	Code Summary:** `math.js` generates random shapes for post pages, posts, and logos in the Frontend of the `FullStackLifeBlog` repository. Enhances visual variety and appeal dynamically.

Frontend.src.app.oauth2callback

File	Summary
page.jsx	Code snippet `page.jsx` in `Frontend/src/app/oauth2callback` imports and exports `OAuth2CallbackPage` component from `oAuth2CallbackPage` folder. It plays a crucial role in user authentication flow.

Frontend.src.app.components.cardList

File	Summary
CardList.jsx	CardList component handles dynamic fetching of posts with pagination. It integrates client-side logic for displaying recent posts with navigation controls. Supports async data retrieval and loading states.**
cardList.module.css	Code snippet in cardList.module.css defines styling for card list component in FullStackLifeBlog frontend, ensuring proper layout, spacing, and button appearance for a cohesive user interface.

Frontend.src.app.components.footer

File	Summary
Footer.jsx	Summary: Footer.jsx renders the FullstackLife blog footer with dynamic theme styles, social media icons, and navigation links. It enhances the frontend UI/UX of the blog site.
footer.module.css	Code snippet in `Footer.module.css` styles the footer's layout, logo, social icons, and links in the FullStackLifeBlog Frontend. It enhances the visual presentation and user experience of the blog's website.

Frontend.src.app.components.icons

File	Summary
SendIcon.jsx	Code Summary:`SendIcon.jsx` in Frontend** generates an SVG send icon with customizable fill, width, and height, enhancing UI components in the blog application.
HeartIcon.jsx	Role: Frontend UI Component Description:** Renders a customizable heart icon in SVG format based on provided parameters, enhancing user interface aesthetics in the blog application.

Frontend.src.app.components.navbar

File	Summary
navbar.module.css	Code snippet in `navbar.module.css` controls styling of the navigation bar in the Frontend module. It ensures a responsive design by adjusting layout and font sizes based on screen width.
NavBar.jsx	Summary:**`NavBar.jsx` in `Frontend` displays social links, logo, theme toggle, and navigation. Integrates theme context for styling consistency.

Frontend.src.app.components.categoryList

File	Summary
categoryList.module.css	Code snippet in categoryList.module.css styles categoryList component in FullStackLifeBlog Frontend. It defines layout for category items with responsive design, aligning items and setting background colors for different categories.
CategoryList.jsx	Code Summary**: `CategoryList.jsx` component in `FullStackLifeBlog` retrieves and displays blog categories with interactive styling, enhancing user navigation.

Frontend.src.app.components.featuredSlider

File	Summary
FeaturedSlider.jsx	Code Summary:**`FeaturedSlider.jsx` manages a slider for featured content in the Frontend of the FullStackLifeBlog repository. It enables auto-scrolling and dynamic resizing of the slider container. Swipe effect to be added.
featuredSlider.module.css	Code Summary:In Frontend, featuredSlider** module CSS defines styling for a responsive slider with navigation arrows. It ensures content visibility and interactivity within the blog platform UI.

Frontend.src.app.components.menu

File	Summary
Menu.jsx	Code Summary:**In `Menu.jsx`, a React component displays trending posts. It structures and renders popular content using `MenuPost` components within a styled layout.
menu.module.css	Code snippet summary:** Defines styling for menu container, titles, and items layout in the Frontend's menu component module CSS, enhancing the visual representation and user experience.

Frontend.src.app.components.menuPost

File	Summary
menuPost.module.css	Code snippet in menuPost.module.css styles blog post components for Frontend. Defines layout and styling rules ensuring consistent visual presentation and user experience.
MenuPost.jsx	Menu Post Component** in Frontend repository displays a styled post item featuring an image, category, title, author, and date, enhancing user experience and visual appeal.

Frontend.src.app.components.pagination

File	Summary
pagination.module.css	Code snippet in `pagination.module.css` styles pagination component in Frontend, defining layout and button styling. Enhances UI for improved navigation.
Pagination.jsx	Pagination Component in Frontend/src/app/components**Manages pagination UI for blog posts. Uses CSS modules for styling. Supports navigating between pages. Key role in Frontend architecture.

Frontend.src.app.components.markdown

File	Summary
MarkdownPreview.jsx	Summary:**`MarkdownPreview.jsx` renders Markdown content with syntax highlighting based on the theme. It utilizes React's `useState` and `useEffect` hooks while importing plugins for customizing Markdown rendering.
MarkdownEditor.jsx	Code in MarkdownEditor.jsx dynamically loads a Markdown editor component using React. Depends on ThemeContext for theming. Handles state for editor content.
markdownPreview.module.css	Code in Frontend/src/app/components/markdown/markdownPreview.module.css controls styling for markdown preview, aligning with FullStackLifeBlog repository's frontend architecture.

Frontend.src.app.components.featured

File	Summary
Featured.jsx	Summary:**In `Featured.jsx`, fetches posts via API for FullStackLife blog's featured slider. Handles loading & error states, displaying posts for knowledge sharing.
featured.module.css	Code in Frontend/src/app/components/featured/featured.module.css styles the featured section, ensuring visual consistency and responsiveness. Critical for maintaining UI standards across the blog platform.

Frontend.src.app.components.comments

File	Summary
Comments.jsx	Summary: `Comments.jsx` manages user comments, submits to the server, displays in reverse order. Requires authentication for posting, shows comment details. Supports dynamic comment creation and viewing.
comments.module.css	Code snippet in `Frontend/src/app/components/comments/comments.module.css` styles the comments section UI components in the Frontend of the FullStackLifeBlog repository. It defines the layout, colors, and interactions for comments display and input form.

Frontend.src.app.components.comment

File	Summary
Comment.jsx	Summary:Comment component displays user comments with like functionality. It renders user details, date, text, and likes. Utilizes Next.js Image and HeartIcon for UI enhancements.
comment.module.css	Code Summary:** Comment styling module for FullStackLifeBlog frontend. Defines layout for user comments, user profile images, likes display. Enhances visual appeal and user engagement with dynamic components.

Frontend.src.app.components.featuredSlide

File	Summary
FeaturedSlide.jsx	FeaturedSlide Component**: Renders a slide with image, title, user info, and creation date. Clickable to view post details. Enhances Frontend UI for FullStackLifeBlog.
featuredSlide.module.css	Code Summary:** Styles the featured slide container in the frontend app, enhancing user experience by applying visually appealing design elements like text and image alignment, shadows, and responsive layout adjustments.

Frontend.src.app.components.oAuth2CallbackPage

File	Summary
OAuth2CallbackPage.jsx	Code Summary:In the Frontend repository, the OAuth2CallbackPage** component handles successful OAuth2 authentication by obtaining a JWT token from the server and redirecting users accordingly.
oAuth2Callback.module.css	Code in oAuth2Callback.module.css aligns and styles content on oAuth2 callback page in the Frontend module. It centers elements and adjusts layout based on screen size, enhancing user experience.

Frontend.src.app.components.authLinks

File	Summary
AuthLinks.jsx	Code Summary:** `AuthLinks` component toggles user authentication state, providing login, write post, and logout links. Utilizes context API for theming and user authentication. Supports responsive menu handling.
authLinks.module.css	Code snippet in `authLinks.module.css` manages styling for responsive menu & authentication links in frontend. Controls menu display based on screen width. Key for UI consistency & user experience in FullStackLifeBlog architecture.

Frontend.src.app.components.card

File	Summary
Card.jsx	Role:** Frontend component for displaying blog post cards.Features: Dynamically renders post information with image, date, category, title, description, and Read more link. Integrates with Next.js and CSS modules.
card.module.css	Code in `card.module.css` organizes card components for blog posts. Visual elements structured with flexbox, responsiveness considered. Layout emphasizes image and text clarity.

Frontend.src.app.components.themeToggle

File	Summary
ThemeToggle.jsx	Code Summary:**Role: `ThemeToggle` component in `Frontend` handles theme switching for user interface.Key Features: Toggles between light and dark themes with visual indicators.
themeToggle.module.css	Code Summary:**`themeToggle.module.css` styles a theme toggle button for the Frontend UI, with a clickable container and a toggle switch for changing themes.

Frontend.src.app.context

File	Summary
AuthContext.jsx	Code Summary:** `AuthContext.jsx` manages user authentication state in the frontend, including login, logout, and token refresh functionality using React context API. Improves user experience and security.
ThemeContext.jsx	Code Summary:**Manages theme selection with local storage synchronization. Toggle light/dark modes. Supports React app appearance preferences. Enhances user experience in FullStackLifeBlog frontend.

Frontend.src.app.login

File	Summary
loginPage.module.css	Summary: `loginPage.module.css` in Frontend's `src/app` manages styling for a login form, optimizing layout and responsiveness to enhance user experience within the FullStackLifeBlog repository architecture.
page.jsx	Summary:**The Login page component enables users to authenticate using email-password or social media accounts. It interacts with the backend API for authentication and navigates users upon successful login.

Frontend.src.app.providers

File	Summary
ThemeProvider.jsx	Summary:** ThemeProvider component in Frontend/src/app/providers folder manages theme context for child components in the FullStackLifeBlog repository's architecture.

🚀 Getting Started

Requirements

Ensure you have the following dependencies installed on your system:

Java: openjdk:21

⚙️ Installation

1. Clone the FullStackLifeBlog repository:

git clone https://github.com/IvanSan2/FullStackLifeBlog

2. Create the `application.properties` File:

In the Backend\src\main\resources directory, you need to create application.properties file and add your configuration settings

# Datasource.url is the url of the database
# after the ? is the parameter to create the database if it does not exist
spring.datasource.url=jdbc:mysql://localhost:3306/blogfinalprojectdb?createDatabaseIfNotExist=true


spring.datasource.username=<DATABASE_USERNAME>
spring.datasource.password=<DATABASE_PASSWORD>


#show sql in the log (optional)
# spring.jpa.show-sql=true

# Hibernate ddl auto (create, create-drop, update)
# update: update the schema if entity is changed, else do nothing
spring.jpa.hibernate.ddl-auto=update

# set username and password for Spring Security:


# set the secret key for JWT (JSON Web Token)
rsa.private-key=classpath:certs/private.pem
# set the public key for JWT
rsa.public-key=classpath:certs/pub.pem

springdoc.swagger-ui.path=/swagger

# Google OAuth2
spring.security.oauth2.client.registration.google.client-id=<GOOGLE_OAUTH_ID>
spring.security.oauth2.client.registration.google.client-secret=<GOOGLE_OAUTH_SECRET>

# Github OAuth2
spring.security.oauth2.client.registration.github.client-id=<GITHUB_OAUTH_ID>
spring.security.oauth2.client.registration.github.client-secret=<GITHUB_OAUTH_SECRET>
# request email from user
spring.security.oauth2.client.registration.github.scope=user:email

# logging
logging.level.org.springframework.security=TRACE

# password for oauth2 client
oauth2.fixed-password=<FIXED_PASSWORD>

3. To generate a certificate and the corresponding keys for JWT (JSON Web Tokens), you can use the `openssl` tool. This process involves generating a private key, deriving the public key from the private key, and then creating the key pair.

3.1. Generate a Private Key (`private.pem`)

Open a terminal and run the following command to generate a private key:

openssl genpkey -algorithm RSA -out private.pem -pkeyopt rsa_keygen_bits:2048

This command generates a 2048-bit RSA private key and saves it to private.pem.

3.2. Extract the Public Key (`pub.pem`)

Next, derive the public key from the private key and save it to pub.pem:

openssl rsa -pubout -in private.pem -out pub.pem

This command reads the private key from private.pem and extracts the public key, saving it to pub.pem.

3.3. Combine Private and Public Keys into a Key Pair (`keypair.pem`)

cat private.pem pub.pem > keypair.pem

Verifying the Keys

To ensure that the keys are generated correctly, you can use the following commands to display the contents of the keys:

Display the private key:

openssl pkey -in private.pem -text -noout

Display the public key:

openssl pkey -in pub.pem -pubin -text -noout

3.4. Add Keys to the directory

Add all generated keys (private.pem, pub.pem, keypair.pem) to the Backend\src\main\resources\certs folder

🤖 Running FullStackLifeBlog

Use the following command to run FullStackLifeBlog Backend:

1. Navigate to the Project Directory:

cd .\Backend\

2. Build the Project:

mvn clean install

3. Run the Application:

mvn spring-boot:run

Ensure that you have Java and Maven installed and properly configured in your system's PATH.

Use the following command to run FullStackLifeBlog Frontend:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

FullStackLife Blog

🔗 Quick Links

📍 Overview

📦 Features

📂 Repository Structure

🧩 Modules

🚀 Getting Started

⚙️ Installation

1. Clone the FullStackLifeBlog repository:

2. Create the `application.properties` File:

3. To generate a certificate and the corresponding keys for JWT (JSON Web Tokens), you can use the `openssl` tool. This process involves generating a private key, deriving the public key from the private key, and then creating the key pair.

3.1. Generate a Private Key (`private.pem`)

3.2. Extract the Public Key (`pub.pem`)

3.3. Combine Private and Public Keys into a Key Pair (`keypair.pem`)

Verifying the Keys

3.4. Add Keys to the directory

🤖 Running FullStackLifeBlog

Use the following command to run FullStackLifeBlog Backend:

1. Navigate to the Project Directory:

2. Build the Project:

3. Run the Application:

Use the following command to run FullStackLifeBlog Frontend:

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
.idea		.idea
.vscode		.vscode
Backend		Backend
Frontend		Frontend
README.md		README.md

IvanSan2/FullStackLifeBlog

Folders and files

Latest commit

History

Repository files navigation

FullStackLife Blog

🔗 Quick Links

📍 Overview

📦 Features

📂 Repository Structure

🧩 Modules

🚀 Getting Started

⚙️ Installation

1. Clone the FullStackLifeBlog repository:

2. Create the application.properties File:

3. To generate a certificate and the corresponding keys for JWT (JSON Web Tokens), you can use the openssl tool. This process involves generating a private key, deriving the public key from the private key, and then creating the key pair.

3.1. Generate a Private Key (private.pem)

3.2. Extract the Public Key (pub.pem)

3.3. Combine Private and Public Keys into a Key Pair (keypair.pem)

Verifying the Keys

3.4. Add Keys to the directory

🤖 Running FullStackLifeBlog

Use the following command to run FullStackLifeBlog Backend:

1. Navigate to the Project Directory:

2. Build the Project:

3. Run the Application:

Use the following command to run FullStackLifeBlog Frontend:

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

2. Create the `application.properties` File:

3. To generate a certificate and the corresponding keys for JWT (JSON Web Tokens), you can use the `openssl` tool. This process involves generating a private key, deriving the public key from the private key, and then creating the key pair.

3.1. Generate a Private Key (`private.pem`)

3.2. Extract the Public Key (`pub.pem`)

3.3. Combine Private and Public Keys into a Key Pair (`keypair.pem`)

Packages