This project is a simple CRM integration application built using the MERN stack, with SQLite for the backend and React for the frontend. The application allows users to add customer information, view it in a grid, and simulate pushing data to a CRM system.
- Backend: Node.js with Express.js and SQLite
- Frontend: React (without using React Hooks)
- Node.js and npm (Node Package Manager) installed on your machine.
- SQLite installed (or use a pre-built database file).
-
Navigate to the Backend Directory
Change to the
AssignmentTwo
directory. -
Install Dependencies
Run
npm install
to install the required packages:express
,sqlite3
, andcors
. -
Create and Set Up the Database
Create an
index.js
file to define the backend logic, including database setup, API endpoints, and server configuration. -
Start the Backend Server
Run
node index.js
to start the backend server.
-
Create React Application
Inside the
AssignmentTwo
folder, create a new React application by runningnpx create-react-app client
, then navigate into theclient
directory. -
Install Dependencies
If needed for older browsers, install the Fetch API polyfill with
npm install whatwg-fetch
. -
Create React Components
Define the components
CustomerForm
andCustomerGrid
in thesrc
folder to handle form submission and display customer data, respectively. -
Update the Main App Component
Modify
App.js
to include theCustomerForm
andCustomerGrid
components, managing state updates and rendering the components. -
Add CSS Styling
Apply CSS styles by creating or updating the
App.css
file in thesrc
folder to enhance the visual appearance of the application.
-
Start the Frontend Development Server
In the
client
directory, runnpm start
to start the React development server. -
Verify the Application
Open a web browser and go to
http://localhost:3000
to see the React application in action. Ensure the backend server is also running to handle API requests.
To deploy the application on Netlify, build the frontend application with npm run build
and follow Netlify’s deployment instructions to host the static files.
- This project does not use React Hooks; it relies on class components and lifecycle methods.
- Ensure the backend server is running and accessible to the frontend application for API calls to work.
This project is licensed under the MIT License - see the LICENSE file for details.