Framecast AI

Customizing Codebase

There are two ways to customize the Framecast AI codebase:

Using GitHub
Using A Code Editor

Using GitHub

You can use GitHub to customize the Framecast AI codebase. Here's how:

Navigate To The Right Path

Open GitHub (opens in a new tab) and make sure you have signed in, Click on your Profile Icon at top right corner and select Your repositories. Click on the repository you want to customize.

Understanding The Structure Of The Codebase

The following file tree explains how the structure of your codebase should look like in your remote repository:

.gitignore

README.md

bun.lockb

components.json

middleware.ts

next.config.js

package-lock.json

package.json

postcss.config.js

tailwind.config.js

theme.config.jsx

tsconfig.json

🚫

Please make sure not to touch or modify the files or part of the files that are not mentioned in the guide. These files include most of the files containing the core functionality of the application. Don't replace any sensitive piece of code without much knowledge if you're someone who is not familiar with coding in the provided tech-stack.

The app folder contains all the necessary sections of your application. You can customize the codebase by modifying the files in this folder. For example: If you want to change the headings of your navbar, you can do so by selecting the navbar folder and finding the appropriate files. Replace the text with your desired text and save the file.
The assets folder contains all the images and other media files used in your application. You can customize the codebase by modifying the files in this folder. Please make sure that if you're replacing any logo's or images, the file name should be the same as the original file name.
The pages folder contains the documentation and other pages of your application. You can customize this like any other file we have mentioned in the guide so far.
The public folder contains all the public files of your application. Public files also include some images and graphics that you can customize by keeping the same file name and replacing the original file.

Submitting Changes

After you have changed the necessary text or images, you can submit the changes by clicking Commit Changes button. Given below are some images on how this step gets performed.

Framecast AI — Editing the footer section of the application.

Your repository is connected to Vercel. Hence, in a few minutes the changes will be automatically deployed to your production environment running on Vercel.

⚠️

Please note that everytime you make a change by clicking the Commit Changes button, an update to your production build will be triggered. This can cause downtime for your users. The more changes you make the more builds in queue will be created. It is recommended to make all the necessary changes at once and then commit them.

Using A Code Editor

You can also use a code editor to customize the Framecast AI codebase. Using a code editor is useful specifically if you're familiar with coding and want to make more advanced or a lot of changes at the same time. Some of the recommended code editors are:

For our example, we will use Visual Studio Code. Here's how you can customize the Framecast AI codebase using Visual Studio Code:

Setup Codebase In Code Editor

Open Visual Studio Code and click on File > Open Folder. Select the folder where you have the Framecast AI codebase.

Understanding The Structure Of The Codebase

The following file tree explains how the structure of your codebase should look like in your code editor:

.gitignore

README.md

bun.lockb

components.json

middleware.ts

next.config.js

package-lock.json

package.json

postcss.config.js

tailwind.config.js

theme.config.jsx

tsconfig.json

🚫

The app folder contains all the necessary sections of your application. You can customize the codebase by modifying the files in this folder. For example: If you want to change the headings of your navbar, you can do so by selecting the navbar folder and finding the appropriate files. Replace the text with your desired text and save the file.
The assets folder contains all the images and other media files used in your application. You can customize the codebase by modifying the files in this folder. Please make sure that if you're replacing any logo's or images, the file name should be the same as the original file name.
The pages folder contains the documentation and other pages of your application. You can customize this like any other file we have mentioned in the guide so far.
The public folder contains all the public files of your application. Public files also include some images and graphics that you can customize by keeping the same file name and replacing the original file.

Submitting Changes

After you have changed the necessary text or images, you can submit the changes by clicking Control + S button. Given below are some images on how this step gets performed.

Your source code folder should have been initialized as a git repository already since you followed our guide. You can commit the changes by running the following commands:

git add .

git commit -m "Your commit message"

git push

Your repository is connected to Vercel. Hence, in a few minutes the changes will be automatically deployed to your production environment running on Vercel.

This is the recommended way to make changes to your codebase. With this you can easily make a lot of changes at the same time.

Deployment Framecast AI ↗