I started RecBlog as well as a way to make myself more familiar with the frontend side of Full Stack using NextJS, Mantine and TailwindCSS.
The backend part of this project can be found in this repository.
There may be a lot of things I have made mistake and a lot of things that I may be able to improve. I will leave it to future Rameshwor ahaha...
- Content Based Filtering (cosine similarity + Inverse Frequency)
- Collaborative Filtering (User-Based)
- Authentication
- Follow, Like and Comment
Client: NextJS (Page Router), TailwindCSS, Mantine
Server: Nestjs, TypeORM, Postgres
# install dependencies
$ yarn install# development
$ yarn run start
# watch mode
$ yarn dev
# production mode
$ yarn run start:prodTo run this project, you will need to add the following environment variables to your .env file
NEXT_PUBLIC_API_BASE_URL = YOUR_API_BASE_URL
NEXT_PUBLIC_CLOUDINARY_CLOUD = YOUR_CLOUDINARY_CLOUD
NEXT_PUBLIC_CLOUDINARY_PRESET = YOUR_CLOUDINARY_PRESET
Inside the src/ there is multiple folder so below is the brief explanation of it.
src/
api/
components/
common/
modals/
modules/
config/
layouts/
pages/
plugins/
styles/
utils/
helpers/
hooks/
lib/
mock/api/
- The api/ folder consist of all the api routes from the backend with each file for the functions.
components/
- common/ - common/ folder consist of all the common components that is used in the project, it contents modules, section, function and even components.
- modals/ - modals/ folder consist of all the modals used in the project.
- modules/ - it contains all the modules and sections of the project to make the pages/ file modular.
layouts/
- it has layouts for the user side and admin side.
utils/
- helpers/ - this has helper functions that can/are common in multiple files.
- hooks/ - contains custom React hooks written by me.
- helpers/ - contains helper functions
The initial plan for RecBlog was to have users who can login and register, they can read other users blogs while also add their own blogs. The blog itself is not that fancy: title, cover image, tags, content of the blog, likes, comment and follow.
So, RecBlog is a multiple user blogging platform that consist of two algorithms. Content-based filtering (cosine similarity + Term Frequency–Inverse Document Frequency inspired Inverse Frequency) and Collaborative filtering (User-based filtering - will be explained later on).
You know basic stuff but it to be fully production ready project!
One of the main reason why I wanted to create a complete simple production ready web application is because, I had realized I have never created personal project that is complete haha..
So enough chitchat and lets go deeper into this project in which I know i have messed up a lot of things.
Its been three months the project has started, I have been doing this on and off. At the time of write this, I do have personal docs for this project but its to messy. But its been to be late than never, I guess.
- Additional browser support
- Add more integrations
- The UI was reference from Figma Community. link here