Codesign
Codesign Architecture & Interior React Template
Thank you for purchasing this React template.
Package Installation & Setup -
1.- Install npm
It will create 'node_module' folder in this all dependency files will be install with this command
npm install
2.- Run Project
With is command file will be compiled and it will be loaded on local server `http://localhost:5173/
npm run dev
3.- Production Build
You may run npm run build command to build the app.
npm run build
4.- Testing the App Locally
Once you've built the app, you may test it locally by running npm run preview
command
npm run preview
5.- Deploying your site
For More details Click
6.- Note:
To get more help on the TypeScript checkout TypeScript
To get more help on the Vite checkout Vite
7.- Further help
You can learn more in the Create React TypeScript Application Documentation To learn TypeScript, check out the TypeScript Documentation.
Folder Directories -
-
assets
This folder contains all the assets of Codesign template.
-
component
This folder component files for various template features.
-
elements
This folder contains all the elements files of Codesign template.
-
pages
This folder has all pages components for various template features.
-
context
This folder has all context api used in the template.
-
images
This folder has all images form used in the template.
-
css
Css file
React File -
- react
- src
- assets
- components
- context
- elements
- pages
- App.tsx
- main.tsx
- index.html
- package.json
- package-lock.json
- ............
- src
Theme Features -
Color Theme
Choosing a color theme for a website is an important part of creating a visually appealing and effective design. Here are so many color option available, you can choose a color theme for your website.
<body data-color="color_1">
Layout Mode
Choosing a layout mode for a website is an important part of creating a visually appealing and effective design. Here are so many mode option available, you can choose a layout mode for your website.
<body class="layout-light">
<body class="layout-dark">
Layout
The layout of a website refers to the way in which content and design elements are arranged on each page of the site. A well-designed layout can help to make a website more visually appealing, easy to navigate, and engaging for users. Here two layouts are available-
<body id="bg" class="boxed">
<body id="bg" class="frame">
Header
The header of a website is the top section of the site that appears on every page. It typically includes the website logo, navigation menu, and sometimes additional elements such as a search bar, social media icons, or a call to action. Here we used fixed and sticky header in our website-
Header Fixed is-fixed
<div class="main-bar-wraper navbar-expand-lg sticky-header is-fixed">
Header Static sticky-no
<div class="main-bar-wraper navbar-expand-lg sticky-no">
Background Color
The background color of a website is an important aspect of its overall design. It sets the tone for the site and can have a significant impact on user experience. You can use body background color like this but it will work only in boxed and frame layout
<body id="bg" class="frame" style="background-color: rgb(255, 175, 41);">
Background Image
Using a background image on a website can add visual interest and personality to the design. You can use body background image like this but it will work only in boxed and frame layout
<body id="bg" class="boxed" style="background-image: url("images/switcher/background/bg1.jpg");">
<body id="bg" class="frame" style="background-image: url("images/switcher/background/bg1.jpg");">
Project Main Features -
- ReactJS v18.2.15
- Vite v5.0.9
- TypeScript v5.2.2
- Node v19.8.1
- Fully Responsive
- Detailed Documentation
- Slider
- Contact Us
- Advanced Elements
- Under Maintenance
- Coming Soon Page
- Error 404
- Scroll
- Key Feature
- Blog Page
- Faq
- Menu Style
- Team Page
- Shop Page
- Services
- Router
Credits -
-
react bootstrap
-
email js
-
react count up
-
react modal video
-
react lightgallery
-
react-responsive-masonry
-
swiper
-
framer-motion
-
react-hot-toast
-
react-router-dom
React Structure -
main.tsx Structure
import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; import { AppContextProvider } from "./context/contextApi.tsx"; ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <AppContextProvider> <App /> </AppContextProvider> </React.StrictMode> );
Contact Form Handler -
Using Email js
Enter the required details for the email js. These should be provided by your system administrator.
const [input, setInput] = useState(""); const form = useRef (null); const sendEmail = (e: FormEvent) => { e.preventDefault(); setInput(""); if (form.current) { emailjs .sendForm( "emailId", "template_0byuv32", form.current, "qUDIPykc776NYHv4m" ) .then( () => { toast.success("Successfully send!"); }, (error) => { toast.error(error.text); } ); } }; return ( <form ref={form} onSubmit={sendEmail}> <label>Name </label> <input type="text" name="user_name" /> <label>Email </label> <input type="email" name="user_email" /> <label>Message </label> <textarea name="message" /> <input type="submit" value="Send" /> </form> );
Our Products -
Do You Need Help To Customization
After Purchase A Template...
You Will Start Customizing According Your Requirement
BUT What If You Don't Know
SOLUTION IS HIRE DexignZone
Hire Same Team For Quality Customization
- In Order To Ensure Your Website Is Live, We Will Customize
- The Template According To Your Requirements And Upload It to the Server.