Bfptec

A full-stack blogging platform with Next.js, Payload CMS, and Mongodb.

View Demo

Table of Contents

1. About The Project
   • Tech Stack
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Bfptec is a full-stack blogging platform focused on water and wastewater purification technologies. It features a modern UI, a comprehensive admin panel, and robust data management capabilities. Powered by Next.js 15, the application leverages React, Shadcn UI, and other cutting-edge technologies to deliver an intuitive user experience.

Admin Panel

The application is built with Payload CMS, which provides a feature-rich admin panel for content management. Some key features include:

• Rich Text Editor: Create and format posts with an easy-to-use editor supporting headings, lists, links, and more.
• File Uploads: Seamlessly upload and manage images, documents, and other media assets.
• SEO Tools: Optimize metadata, slugs, and other SEO-related fields directly within the admin interface.
• Dynamic Page Builder: Create and manage pages dynamically without touching the codebase.
• Real-time Preview: Preview content changes in real-time before publishing.
• Customizable Dashboard: Tailor the admin panel to your needs with plugins and configurations.

These features make the admin panel user-friendly and flexible, enabling efficient content management and website updates.

(back to top)

Tech Stack

Frontend

• 
• 
• 

Backend

• 
• 

Database

• 

(back to top)

Getting Started

Follow these steps to set up the project locally.

Prerequisites

Make sure you have the following installed on your machine:

• Node.js: Version ^18.20.2 || >=20.9.0 is required. Use nvm to manage Node.js versions:

  nvm install 20.9.0
  nvm use 20.9.0

Installation

1. Clone the repo

   git clone https://github.com/bfptec/bfptec.git

2. Navigate to the project directory:

   cd bfptec

3. Install NPM packages

   npm install

4. Configure environment variables:

   • Create a .env file in the root directory
   • Add the following variables:

   DATABASE_URL=mongodb+srv://<username>:<password>@cluster.mongodb.net/bfptec
   NEXT_PUBLIC_SITE_URL=https://bfptec.example.com
   PAYLOAD_SECRET=your-secret-key

5. Build and Run

   npm run build
   npm start

(back to top)

CI/CD

The deployment process is fully automated using GitHub webhooks and a custom Bash script. This ensures reliable, consistent, and efficient deployments to the production environment.

Github Webhook

end point url wil be: https://you-live-site.com/api/webhooks/github

WEBHOOKSSECRET: _place at .env file.

Bash Script

!Note: this setup is for the CPanel Hosting services. for other deployment tools or services follow their documents.

• REPO_PATH: Path to the application.

  REPO_PATH="/home/jsclimbe/repositories/bfptec"

• TEMP_BUILD_PATH: a temporary directory. it will be removed after each deployment.

  TEMP_BUILD_PATH="/home/jsclimbe/repositories/bfptec-temp"

• HTACCESS: after a number of deployments cpanel restricts the process, so it's needed to cleer .htaccess file content.

  HTACCESS="/home/jsclimbe/bfptec.jsclimber.ir/.htaccess"

• APP_NAME: pm2 process name, by default it is set domain name.

  APP_NAME="bfptec.jsclimber.ir"

• LOG_FILE: bash logs stores at this log file, you can change the path if you like:

  LOG_FILE="/home/jsclimbe/deploy_bfptec.log"

See deploy.sh for more information.

Backup

• Media : You need to download media folder from public directory regularly, this folder contains your uploaded files.

• Database : You need to backup Mongodb database then restore it with your local database or just keep it safe.

  1. Extract downloaded database:

     tar -xvzf downloaded_monodb_database.tar.gz

  2. (optional):if you set a local copy of project then, Restore:

     mongorestore --uri="mongodb://127.0.0.1/bfptec" --drop ./extracted_monodb_database

(back to top)

Roadmap

Roadmap

• Add blogging functionality with an admin panel.
• Extend the Bfptec blogging website into a virtual water and wastewater lab.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Top contributors:

(back to top)

License

Distributed under the Unlicense License. See LICENSE.txt for more information.

(back to top)

Contact

Amir Aryan - @amiraryan1996 - [email protected]

Project Link: https://github.com/bfptec/bfptec/

(back to top)

Acknowledgments

Here are some resources that helped shape this project. Thanks to all the amazing tools and communities that make development easier and more efficient:

• React - A JavaScript library for building user interfaces.
• Next.js - A React framework for building modern web applications.
• Payload CMS - A powerful headless CMS for managing content.
• Shadcn UI - A library of prebuilt and customizable UI components.
• MongoDB - A NoSQL database for scalable and flexible data storage.
• Tailwind CSS - A utility-first CSS framework for rapid UI development.

(back to top)