buildog-dev/buildog

Buildog

1. Getting started
   • Install dependencies
2. Local development
   • Fork the repo
   • Clone the repo
   • Running turborepo
     • Environment variables
     • Shared components
     • Adding new component on @repo/ui
     • Installing packages
3. Create a pull request

Getting started

Thank you for your interest in Buildog and your willingness to contribute!

Recognizing the challenges bloggers face in managing their content, we’re committed to making the process smoother and more efficient. We are building this tool to provide bloggers with an intuitive platform to streamline their blogging workflow.

To get started, it’s helpful to understand what Buildog is and how it operates:

• What is buildog?: Buildog is a web-based application designed to help bloggers write, schedule, and publish their content efficiently. It aims to streamline the blogging process and provide valuable insights into content performance.

• How Buildog Works?: This section provides a high-level overview of Buildog's functionality and user interface. It outlines the key features and components that you’ll interact with, offering insight into how the application supports your tasks and workflows. It’s a great starting point to understand how to navigate and utilize Buildog effectively.

Install dependencies

You will need to install and configure the following dependencies on your machine to build Buildog:

• Git
• Node.js v18.x (LTS)
• pnpm version 8.x.x

Local development

This repo uses Turborepo.

Fork the repo

To contribute code to Buildog, you must fork the Buildog repo.

Clone the repo

1. Clone your GitHub forked repo:

git clone https://github.com/<github_username>/buildog.git

2. Go to the Buildog directory:

cd buildog

Install dependencies

1. Install the dependencies in the root of the repo.

pnpm install # install dependencies

2. After that you can run the apps simultaneously with the following.

pnpm dev

Directory	Description	Local development server
/apps/buildog	The main web application.	http://localhost:3000
/apps/api	The main backend application.	http://localhost:3010
/apps/docs	The main documentation.	http://localhost:8080

Environment variables

Environment variables documentation includes instructions on how to set up Firebase and the database for Buildog. Providing environment variables documentation is highly recommended to getting started. Firebase - How to setup Firebase Database - How to setup Database

Shared components

The monorepo has a set of shared components under /packages:

• /packages/ui: shadcn/ui components.
• /packages/typescript-config: Shared Typescript settings
• /packages/eslint-config: Shared eslint settings

Adding new component on @repo/ui

Use the pre-made script:

pnpm ui:add <shadcn/ui-component-name>

This works just like the add command in the shadcn/ui CLI.

Installing packages

Installing a package with pnpm workspaces requires you to add the --filter flag to tell pnpm which workspace you want to install into. Do not install dependencies in their local folder, install them from the route using the --filter flag.

pnpm add <package> --filter <workspace>
pnpm uninstall <package> --filter <workspace>

For example:

• pnpm add react --filter ./apps/buildog installs into ./apps/buildog

Create a pull request

After making any changes, open a pull request. Once your PR has been merged, you will be proudly listed as a contributor.

buildog's Issues

feat(api): save blog post via storage service

feat: markdown to html parser

fix(buildog): route groups for login and signup

We need to add login and sign up under route group. Right now, there is no route group for the login and sign up, we have to create the group, these two page are 70% same (only their form changes). We need a layout and pages. Here is the nextjs documentation https://nextjs.org/docs/app/building-your-application/routing/route-groups

feat(buildog): custom headers for theme

In Web section on the side, user can create custom themes for their web page. We need to develop this step by step. We have to start baby steps. Right now, We need a three different header each header needs to be a custom name (use your imagination). You can generate the components using v0.

• Generate a folder under components theme.
• Under theme create a three different headers using v0.
• Under /web add a dropdown which name is Header. Each list items needs to be created header name. When user select an item, render the selected header to the screen.

docs: add wiki links in readme

Add wiki links in readme

What is Buildog
How Buildog works?

feat(buildog): organization users flows - list, add, update, remove

DRAFT: More information needed to start this task

Users can create their organizations and each organizations may have users. Root user can add users in their organization. Right now, there are three roles "admin", "writer", "reader".

• create a table for showing users in the organization
• develop a add user with modal
• develop a update user
• develop a remove user

feat(buildog): user table for managing users

Is your feature request related to a problem? Please describe.
We currently don't have a table for our users inside the user tab in the settings page

Describe the solution you'd like
I would like to add a table something like in our "blogs" page so that we can manage the users which are logged in to the current organization.

Describe alternatives you've considered
I haven't thought any alternative ways because we have recently discussed about this page and this solution

Additional context
I would like to start working with this one firstly and then proceed to the organization landing page

docs: theme page for generating web application with selected theme

feat: create organizations' users table, route and function

Under each organization, we have to manage their users. Root user is users who created the organization. We have to give a permission to add users to root account. Root user can add other users to their organization and give some roles.

Example roles for initial:

• Admin
• Writer
• Reader

Wrong blogs type in page of /blog direction

This save function is taken from "/src/app/create-blog/page.tsx". Its purpose is to save the new blog to localStorage. As you can see, All blogs are stored as one object and each blog is assigned to a property named blog filename.

const save = () => {
    if (filename && cards.length > 0) {
      const text = cards?.map((item) => item.value + "\n\n").join("");

      const currentLocalStorage = JSON.parse(
        localStorage.getItem("blogs") as string
      );

      const newLocalStorage = {
        ...currentLocalStorage,
        [filename]: { cards, filename, text },
      };  
      localStorage.setItem("blogs", JSON.stringify(newLocalStorage));
    } else {
      // error message
    }
  };

But in "/src/app/blog/page.tsx", it is stored as Blog Array.

export default function Page() {
  const [blogs, setBlogs] = useState<Blog[]>();

  useEffect(() => {
    const localStorageBlogs = JSON.parse(
      localStorage.getItem("blogs") as string
    );
    setBlogs(localStorageBlogs);
  }, []);

feat(api): deploy backend application to ECS

feat: sign up flow

feat(buildog): dropdown for switching organizations

We need a dropdown in header for switching organizations. Right now we have a "Back to Organization" button in sidebar but we can increase the user experience with dropdown, we can also add an icon to navigate user to organizations. Here is the wireframe:

feat(docs): install the project for windows os and update the documentation for windows contributers

Contributors who use Windows struggle with some errors. One of the example is given below:

feat(buildog): custom blog card for theme

In Web section on the side, user can create custom themes for their web page. We need to develop this step by step. We have to start baby steps. Right now, We need a three different blog card showcase each blog card needs to be a custom name. You can generate the components using v0.

Example:

refactor: convert blog page's cards view to table

We are reading data from local store and displaying data with using cards. Card view is decreasing user experience. We need to display all blog data to single table for more readability. Shadcn UI has a beautiful table example. table example page.

Just use the same table for this task. The columns will be as follows in order: blog id, blog name, tags. Display only blog name right now. You can also add three dot dropdown for edit, delete, etc. Leave other columns data empty.

feat(api): change the structure for increasing usability and readability

Create a sign-in page

App needs an authentication page. The signup page is not important right now because admin users need the be created in the app on users tab. Only root account can create and manage users.

• Create a sign in page as same as authentication
• the root must be /login

After copy the example

• Remove Login button top left of the page
• Change Create an account title to Welcome Back
• Change Acme Inc header to Burası Bizim
• Add input component under email input for getting user's password
• Remove continue with GitHub

No need to call an api, when we decide our backend or authentication provider we need to open a different issue. Just create the UI.

docs: documentation for how general system works

feat: add husky and prettier for pre-commit and code alignments #282 minutes ago

We need a prettier to align code.

Add header to the main layout for displaying user avatar

We need a header to show avatar like as bellow image. The circle avatar needs to be dropdown.

Check the header example here, you can use same as this one: example
What you need is dropdown

refactor: store database password in environment file

Currently, the database password is hardcoded in the source code, which poses a security risk. To improve security database password should be moved to an environment variable. This will allow the password to be stored securely outside the codebase and can be easily configured per environment. PR #49 is related to this issue.

feat(docs): image folder for images

Currently, the Authentication.md file in the documentation retrieves images from the GitHub wiki. To improve organization, we need to create an images folder under the docs directory. All documents should then update their image links to use this images folder for storing and displaying images.

feat(buildog): add status and slug column to blog table

Right now we have a table for listing blogs. Each blog has a status which is "Published", "Scheduled", "Draft". We don't show this status on this table. Could you add status column? Also we need a slug column for showing first 100 character to user. We have also have tag column but it is unnecessary. We can add tags in front of the slug. You can check here to see an shadcn example.

This data will come from backend you can use a dummy data (create a object)

Additionally, at the beginning of the project we used local storage for testing could you please remove the all local storage code?

docs: write documentation about multi tenant system

feat(buildog): add tab for teams on settings screen

What we need is to add a tab to this page. For now, two sections will suffice: one labeled "Settings" and the other "Teams."

refactor(buildog): change Radix icons to Phosphor icons

Right now, our icon library is using Radix icons and we want to change all icons. The new icon library must be Phosphor icons. Shadcn may use Radix icons, check shadcn as well. If shadcn uses Radix icons leave it otherwise icons needs to be changed.

feat: implement AWS sdk for golang

Preview for saving the blog

Need a preview markdown modal for showing the final version of the current blog. This modal allows read-only; the user can't update the blog on the modal. Modal has to contain two buttons: Save and Cancel.

• Change the name of the current save button (Save to Preview & Save)
• When the user presses the Preview & Save button, open a modal. 
• Show the user the latest version of the markdown file.
• Ask to save it or cancel it
• If the user presses Save, save the modal to local storage (it will work as it currently does).
• If the user presses Cancel -> only close the modal.

feat: create documentation project with nextra

Github wiki is not solve our problem. We need a manageable documentation tool.

feat: create tenants table, route and function

Conversion to Monorepo for Project Management Efficiency

Overview:

• We are embarking on new backend and React automation projects that introduce diverse components using CodeBuild for CI/CD and S3 for storage. Currently, our Next.js app resides in its own repository. However, the introduction of these new projects necessitates a reevaluation of our code organization.

Reasons for Monorepo:

• Code Sharing and Reusability: With backend and frontend automation projects, there’s an inherent need for shared functionalities and libraries between them. A monorepo allows us to efficiently share code, reducing duplication and ensuring consistency across projects.

• Simplified Dependency Management: When multiple projects interact and depend on shared modules or utilities, a monorepo streamlines dependency management. This helps avoid versioning conflicts and ensures uniformity in libraries used across the board.

• Centralized Management: Managing diverse projects under a single repository enables unified version control, easing the tracking of changes, and simplifying overall project management.

Impact:

• Development Speed: A monorepo facilitates faster development by enabling cross-project collaboration and reducing the time spent on integrating disparate codebases.
• Consistency and Quality: Shared components and standardized practices across projects ensure consistency and enhance overall code quality.
• CI/CD Integration: Centralizing projects simplifies CI/CD pipeline management, enabling smoother integration with CodeBuild and S3.

feat(api): change authentication provider Auth0 to Firebase

feat(docs): how authentication system works?

Write a documentation about how authentication works and what are the flows?

• Why we are using firebase?
• Why we switch Auth0 to firebase?
• Draw a UML for flows.
• What happen emailVerified is false? Describe why we sign out user if emailVerified is false.
• Describe Authentication class in web-sdk.

feat: automating Next.js App Deployment to S3 using Terraform and AWS CodeBuild

Automate the deployment of the Next.js app to an S3 bucket using Terraform for infrastructure setup and AWS CodeBuild for the build and upload process.

Steps:

1. Terraform Configuration:
   Set up Terraform modules for S3 bucket creation and define necessary permissions.

2. AWS CodeBuild Integration:
   Configure CodeBuild to trigger Next.js app builds and define build specifications.

3. S3 Upload Setup:
   Implement the upload process in CodeBuild to push app artifacts to the S3 bucket.

4. Testing and Documentation:
   Validate the automated process and document configurations for future maintenance.

fix(buildog): navigate login to sign up

We need to navigate user to sign up if the user hasn't got any account. Right now, there is no button for that.

• Add a button on the /login page to redirect users to the /signup page if they don't have an account.
• Add a button on the /signup page to redirect users to the /login page if they already have an account.

Deleting a blog on a blog page

Need a button for deleting blog on blog page. Right now, we don't have any backend. The only way to store item is using local storage.

• Add a delete button.
• When user press delete button, open a modal. Ask user sure to delete?
• If user's answer is yes, find the item in blogs that stored on locally and remove it, close the modal.
• If user's answer is no, close the modal.

feat: simple editor for creating blog

refactor: create blog page update for creating blog posts more efficient

Right now, we are using drag-and-drop text areas for generating our blog posts. Sometimes it can be confusing for the user because of the UX. We can rewrite this page without using the drag-and-drop feature. The shadcn UI library has a playground page, and we can use the same UI for our creating page. The image below shows the playground example page.

Check here

We can adapt this UI to our problem. The drawing for this page is below:

This page has three different modes (text, split, and preview). The default mode has to be show only text area; the split view needs to divide screen two, and half of the screen has to be text area and half of the screen has to be preview. In preview mode, the whole screen area needs to be viewed so that the user can check what he or she typed.

The current UI create page is under create-blog route. You can use exactly the same route, but don't remove the current file; just change the current file name to old-creat-blog, then create a new create-blog folder to develop.

feat: create back office settings page & dynamic theme

Back office needs a settings page. User can change and see their information in this page and customize back office theme. Right now, showing user email (not editable) and theme (light or dark switch) is enough.

You can check forms

feat(buildog): organizations for managing users, blogs, www and settings under an organization

Organizations are environments that users can adjust blogs, users, www, settings. Organizations page should be a root page that user select the organization first. After selecting organization, redirecting user to managing organization page is crucial. Managing organization page has to includes www, create blog, blogs, settings pages.

feat(api): handle 403/404 for unknown routes

Implement a handler in the Go backend to return a 403 Forbidden response for all unknown routes.

If a user attempts to access a route that does not exist, the server should respond with a 403 status code.

Backoffice route protection

We need to protect buildog web routes. If user hasn't got any token, system shouldn't enter the user to the back office. Use our SDK to build route protection. If you need anything on SDK you can code it or open an issue.

You can reach the SDK under /packages/web-sdk

feat(buildog): settings page for user

Right now we have a profile image to the right corner. This image is dropdown and there is two list items which are Profile and Logout.

• Rename the dropdown item Profile to Settings
• Update the component with dividers and icons (here is the example)
• Create a settings page under /account route, and move the organization setting's page under the /account. Leave the tabs on organization setting's page.

feat(buildog): error handling on authentication flow

We are using firebase authentication. Right now, the error messages which is generated by firebase directly render to the screen. For example, if user enters an invalid credentials, the error message "Firebase: Error (auth/invalid-credential)." will rendered to the screen We have to manage these error cases with our sentences.