Project Title

GraphQL-Powered Client Management System

Description

This project is a full-stack application developed with Node.js, GraphQL, React, and Apollo Client. The backend utilizes Node.js with Apollo Server to create a GraphQL API, while the frontend is built using React with Apollo Client and Vite. The project includes an Apollo Server that serves client data from a JSON file, a React frontend that fetches and displays data, and navigation between listing and detail pages using React Router. The project adheres to clean code practices and is fully documented. The instructions for this project were pulled from theBLEN Corp sample project repository.

Detailed Description About the Project Overview

This project consists of a full-stack application built with Node.js, GraphQL, React, and Apollo Client. The backend is developed using Node.js with Apollo Server to create a GraphQL API, while the frontend is created using React with Apollo Client and Vite.

Backend Setup

• Clone the Repository: Clone the repository to your local machine using the git clone command. You can pull from https://github.com/blencorp/sample-project.git to get the instruction for the project.

• Initialize Backend: Navigate to the backend directory. Initialize a new Node.js project with npm init -y. Install necessary dependencies for the backend using npm install. Create the GraphQL schema, resolvers, and server setup files.

• Compile and Run Server: Compile the TypeScript files with npx tsc. Start the server with npx ts-node src/index.ts.

• Test the GraphQL Endpoint: Access the GraphQL playground in your browser at http://localhost:4000/ to test the API.

Frontend Setup

• Create React App with Vite:

• Navigate back to the parent directory. Create a new React application using Vite with TypeScript template. Install Apollo Client and GraphQL dependencies for the frontend. Start Development Server:

• Navigate to the newly created frontend directory. Start the development server with npm run dev.

Git Commands

• Add Changes: Add the changes to Git with git add ...

• Commit Changes: Commit the changes with a descriptive message using git commit -m "Initial commit".

• Push Changes: Push the changes to the remote repository on the main branch with git push origin main.

Pull Request

Once the changes are pushed to the remote repository, open a new pull request by comparing changes across two branches. Provide a title and a description for the pull request before submitting it for review.

Additional Information If you encounter any issues or have questions, feel free to reach out for assistance.