NextJs
React
Tailwindcss
NextAuth
Typescript
MyBuilder Healthcare Automation Platform is built with Tailwindcss and Nextjs.
This platform is ready to use and you can totally customize as per your requirement.
For Customization, You should have knowledge of NextJs, ReactJs, Tailwind and JSX to be able to modify this platform.
|—
package|—
public|—
src|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
app|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
(site) (Contains all the pages)|
|
|
|
|
|
|
|
|
|
|—
(auth)|
|
|
|—
signin|
|—
signup|—
contact|—
documentation|—
privacy-policy|—
terms-and-conditions|—
api|
|
|
|—
auth|
|—
page-data|—
globals.css|—
layout.tsx|—
not-found.tsx|—
page.tsx|—
components (All the Components of this platform.)|—
styles|—
types|—
utils|—
next.config.mjs|—
postcss.config.mjs|—
package.json|—
postcss.config.mjs|—
tsconfig.jsonBefore proceeding, you need to have the latest stable node.js
Open package folder and install its dependencies. We recommanded yarn or npm.
cd project-folder
npm install
cd project-folder
yarn install
Once npm install is done now you an run the app.
npm run dev or yarn run dev
This command will start a local webserver http://localhost:3000:
> mybuilder_project@1.0.0 dev
> next dev
-Next.js 15.1.7
-Local: http://localhost:3000
After adding url run below command for build a app.
npm run build or yarn build
Finally, Your webiste is ready to be deployed.🥳
1. Override Colors
For any change in colors : src/utils/extendedConfig.ts
dark_black: "#1B1D1E",purple_blue: "#4928FD",purple: "#BA81EE",blue: "#70B5FF",orange: "#FFAF68",green: "#79D45E",pink: "#F4889A",blue_gradient: "#D9F3FC",yellow_gradient: "#FDF1D3",paleYellow: "#F6E683",dark_yellow_gradient: "#443f32",dark_blue_gradient: "#303d42"
2. Override Theme Colors
For change , go to : src/utils/extendedConfig.ts
dark_black: "#1B1D1E",purple_blue: "#4928FD",
1. Change Font family over here : src/app/globals.css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
html { font-family: "Inter Tight", sans-serif; }
1. Change Logo over here : src/components/layout/header/logo/index.tsx
<Link href="/">
<Image
src="/images/logo/logo.svg"
alt="logo"
width=160
height=50
quality=100
className='dark:hidden'
/>
<Image
src="/images/logo/DarkModeLogo.svg"
alt="logo"
width=160
height=50
quality=100
className='dark:block hidden'
/>
</Link>