React Blog

Blogged Backend

Description

Introducing 'Blogged'—a visionary blog platform where users seamlessly share their thoughts with friends. Crafted with the power of React hooks, such as useState and useEffect, this application empowers you to effortlessly manage your posts. Edit and refine your creations or gracefully bid them farewell with the deletion feature. Navigating through the content is a breeze, thanks to the elegance of React-router for seamless routing.

Under the hood, this dynamic application communicates effortlessly with a server using the Axios API. Elevating the user experience further, 'Blogged' leverages our own robust backend application to persistently store your valuable content. Experience the fusion of creativity and technology in this sophisticated blog concept.

Our backend is meticulously crafted in Java, utilizing the powerful Javalin library to sculpt seamless routes for our REST API. This strategic choice ensures optimal performance and robust functionality, providing a solid foundation for our application's backend architecture.

Features

• Create or login to an account
• Manage your own posts
  • Create post
  • Delete post
  • Edit post
• view posts from other users
• search after specific users posts

Dependencies

Make sure you have Node.js and npm installed before running the application.

• Node.js: Download Node.js
• json-server: Install using npm install -g json-server
• @react-router for routing
• Styling uses Tailwind for simple css

Getting Started

1. Clone the repository:

   git clone git@github.com:TheRealJackiBoi/BlogExamProject.git

2. Navigate to the project directory:

   cd BlogExamProject

3. Install dependencies:

   npm install

4. Start the json-server for data persistence:

   npm run server

5. Start the React application:

   npm run dev

6. Open your browser and visit http://localhost:3000 to use the blogged app.

Api Calls

login

export const login = async (username, password, callback) => {
  const data = {
    username: username,
    password: password,
  };

  try {
    const response = await axios.post(`${BASE_URL}/auth/login`, data, {
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    const token = response.data.token;
    setToken(token);

    callback(true);

    return true; // Indicate successful login
  } catch (error) {
    console.error(error);
    callback(false);
    return false; // Indicate login failure
  }
};

create user

export const register = async (username, password, callback) => {
  const data = {
    'username': username,
    'password': password,
  };

  try {
    const response = await axios.post(`${BASE_URL}/auth/register`, data, {
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const token = response.data.token;
    callback(true);
    setToken(token);
  } catch (error) {
    console.error(error);
  }
};

create post

export const createPost = async (title, content, visibility, username) => {
  const data = {
    'title': title,
    'content': content,
    'visibility': visibility,
    'username': username,
  };

  try {
    const response = await axios.post(`${BASE_URL}/posts`, data, {
      withCredentials: true,
      headers: {
        'Content-type': 'application/json',
        Authorization: `Bearer ${getToken()}`,
      },
    });
    console.log('Post created:', response.data);
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

Get specific post by id

export const getPostById = async (id) => {
  const token = getToken();
  try {
    const response = await axios.get(`${BASE_URL}/posts/${id}`, {
      withCredentials: true,
      headers: {
        "Content-type": "application/json",
        Authorization: `Bearer ${token}`,
      },
    });
    console.log(response);
    if (response.status === 200) {
      const post = await response.data;
      return post;
    } else {
      console.error("Failed to fetch posts");
    }
  } catch (error) {
    console.error("Error fetching posts:", error);
  }
};

Project Structure

react-Blogged
├── public/
├── src
│   ├── api/services
│   │   ├── auth
│   │   |   └── auth.js
│   │   ├── supabase
│   │   |   ├── image-facade.js
│   │   |   └── supabase.js
│   │   ├── config.js
|   |   └── posts.js
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   ├── navbar
|   |   |   ├── NavBar.jsx
|   |   |   └── SearchBar.jsx
│   │   ├── post
|   |   |   ├── actions.jsx
|   |   |   ├── Edit.jsx
|   |   |   ├── Like.jsx
|   |   |   ├── Post.jsx
|   |   |   └── Username.jsx
│   │   ├── post-display
|   |   |   ├── Pagination.jsx
|   |   |   └── PostsDisplay.jsx
│   │   └── PostNewModal.jsx
│   ├── pages
│   │   ├── auth
|   |   |   ├── Login.jsx
|   |   |   └── SignUp.jsx
│   │   ├── ErrorPage.jsx
│   │   ├── Home.jsx
│   │   ├── Index.jsx
│   │   ├── MainLayout.jsx
│   │   ├── NewPost.jsx
│   │   ├── PostEdit.jsx
│   │   ├── UserPosts.jsx
│   │   └── UserSettings.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   └── utilities
│       └── img
│          ├── frontEndMap1.png
│          ├── frontEndMap2.png
│          └── frontEndMap3.png
├── .env
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js
└── README.md

Contributing

If you are interested in contribuing to this or any of our future projects, apply via this Contribute doc link.

if the first link is broken try here link