Brackets(Peer)

---

Date: September-October 2025.

Usof is the challenge of Track Full Stack, the last stage of the Innovation Campus educational program. The challenge consists of 2 parts and requires to build an API and then UI for a question and answer (Q&A) service for professional and enthusiast programmers.

Usof is highly inspired by Stack Overflow.

My usof implementation, Brackets(Peer), is primarily aimed at beginners in Computer Science, allowing them to share their problems/solutions with posts and receive solutions/feedback from other users to facilitate knowledge exchange and learning in a supportive atmosphere.

More information about the backend part can be found in an API folder.

Features

The frontend was built with HTML, CSS, React framework, Redux, and provides:

• pleasant, intuitive and responsive design with satisfying color palette, balanced contrasts, lightweight animations, helpful icons and custom components
• friendly authentication (registration, login, password reset)
• profile management (updating login, avatar, full name, about section, email, password)
• viewing posts, categories and users with extensive filtering, sorting and pagination
• creating and editing posts with rich text, syntax highlighting and an opportunity to attach images
• creating and editing comments and replies to them (with rich text too)
• liking, disliking and thanking posts and comments
• ability to add posts to favorites and pin the best comments
• posts, comments, categories and users management for admins

More information can be found in docs.

Requirements and dependencies

• Node.js (I use v22.14.0)
• MySQL (I use v8.0.42)
• npm packages (see package.json files in API and web folders)

How to run

Clone the repository to your local machine and navigate to the project directory:

git clone https://github.com/VeronikaSukhonos/usof.git
cd usof

Make sure that you have Node.js preinstalled on your machine and install all dependencies:

npm install

Open to see instructions for how to set up the server

(these steps are also mentioned in README.md of the backend part)

Make sure that you have MySQL preinstalled on your machine, open config.js file and put your MySQL credentials instead of these:

const config = {
  // ...
  db: {
    user: 'root', // or another user with equivalent privileges
    password: 'securepass',
    // ...
  },
  // ...
};

In config.js, put your email address (gmail) and app password instead of these:

  // ...
  email: {
    user: '[email protected]',
    password: 'your app password'
  },
  // ...

In config.js, put your token secret keys instead of these:

  // ...
  jwt: {
    accessTokenSecret: 'someAccessTokenSecret',
    accessTokenExpTime: '30m',
    refreshTokenSecret: 'someRefreshTokenSecret',
    refreshTokenExpTime: '30d', // always specify in days
    confirmTokenSecret: 'someConfirmTokenSecret',
    confirmTokenExpTime: '15m' // always specify in minutes
  },
  // ...

To start the server and the client simultaneously in one terminal, run:

npm run dev

To start the server and the client in different terminals, run:

npm run dev:API # in the terminal for the server

npm run dev:web # in the terminal for the client

In both ways, starting the server creates a database usof, user usofer and fills the database with some test data you can find in data.sql.

If you want to recreate the database on startup, run:

npm run dev-r # when using a single terminal

npm run dev-r:API # in the terminal for the server when using different terminals

When you are done, stop the server and the client by pressing Ctrl+C.

Documentation

Project documentation for the backend can be found here and contains:

• description of my experience (activities, findings, problems, conclusions) while working on the backend part according to Challenge Based Learning (CBL) framework
• description of all API endpoints

Project documentation for the frontend can be found here and contains:

• description of my experience (activities, findings, problems, conclusions) while working on the frontend part according to Challenge Based Learning (CBL) framework
• description of all features