Git Product home page Git Product logo

crmintegration's Introduction

CRM Integration Project

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.

Project Structure

  • Backend: Node.js with Express.js and SQLite
  • Frontend: React (without using React Hooks)

Prerequisites

  • Node.js and npm (Node Package Manager) installed on your machine.
  • SQLite installed (or use a pre-built database file).

Backend Setup

  1. Navigate to the Backend Directory

    Change to the AssignmentTwo directory.

  2. Install Dependencies

    Run npm install to install the required packages: express, sqlite3, and cors.

  3. Create and Set Up the Database

    Create an index.js file to define the backend logic, including database setup, API endpoints, and server configuration.

  4. Start the Backend Server

    Run node index.js to start the backend server.

Frontend Setup

  1. Create React Application

    Inside the AssignmentTwo folder, create a new React application by running npx create-react-app client, then navigate into the client directory.

  2. Install Dependencies

    If needed for older browsers, install the Fetch API polyfill with npm install whatwg-fetch.

  3. Create React Components

    Define the components CustomerForm and CustomerGrid in the src folder to handle form submission and display customer data, respectively.

  4. Update the Main App Component

    Modify App.js to include the CustomerForm and CustomerGrid components, managing state updates and rendering the components.

  5. Add CSS Styling

    Apply CSS styles by creating or updating the App.css file in the src folder to enhance the visual appearance of the application.

Running the Application

  1. Start the Frontend Development Server

    In the client directory, run npm start to start the React development server.

  2. 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.

Deployment

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.

Notes

  • 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.

License

This project is licensed under the MIT License - see the LICENSE file for details.

crmintegration's People

Contributors

mauryaganesh avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.