Merge pull request #28 from oss-slu/9-update-readme-files

#9 updated documentation with environment varibales

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 package-lock.json
 *.DS_Store
-.vscode
+.vscode
+.env

client-app/README.md

@@ -1,70 +1,57 @@
-# Getting Started with Create React App
+# Development Setup
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Follow these steps to set up your development environment for the client-side application.
 
-## Available Scripts
+## Prerequisites
 
-In the project directory, you can run:
+- **Node.js**: Ensure that Node.js is installed on your system. If it's not installed, you can download and install it from the [Node.js Official Website](https://nodejs.org/).
 
-### `npm start`
+## Step-by-Step Setup
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+### 1. Navigate to the client-app directory
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+To navigate to the server directory where your backend files reside, run:
 
-### `npm test`
+    cd client-app
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### 2. Create Environment Variables
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+Create a `.env` file and define the necessary environment variables:
 
-### `npm run eject`
+```plaintext
+REACT_APP_BACKEND_API_BASE_URL="http://localhost:5000/"
+```
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+### 3. Install Dependencies
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Run the following command in your project directory to install required dependencies:
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+    npm install
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+Installs all the packages defined in your `package.json` file (both dependencies and devDependencies).
 
-## Learn More
+### 4. Start the Development Server
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+Run the following command to start the app in development mode:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+    npm start
 
-### Code Splitting
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser. The page will reload if you make edits. You may also see any lint errors in the console.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+### 5. Running Tests
 
-### Analyzing the Bundle Size
+To launch the test runner in the interactive watch mode, run:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+    npm test
 
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+### 6. Build the Application
 
-### Deployment
+To build the app for production to the `build` folder, run:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+    npm run build
 
-### `npm run build` fails to minify
+It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified, and the filenames include the hashes. Your app is ready to be deployed!
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

client-app/src/Components/DonorForm.tsx

@@ -92,7 +92,7 @@ const DonorForm: React.FC = () => {
         if (validateForm()) {
             try {
                 const response = await axios.post(
-                    'http://localhost:5000/donor',
+                    `${process.env.REACT_APP_BACKEND_API_BASE_URL}donor`,
                     formData,
                 );
                 if (response.status === 201) {

server/README.md

@@ -32,49 +32,71 @@ Follow these steps to set up your development environment.
   - Right-click on 'Databases', then select 'Create' -> 'Database'.
   - Enter the desired name for your database in the 'Database Name' field and save.
 
-### 2. Create Environment Variables
+### 2. Navigate to the server directory
 
-Create a `.env` file in the root directory of your project and define the necessary environment variables:
+To navigate to the server directory where your backend files reside, run:
+
+    cd server
+
+### 3. Create Environment Variables
+
+Create a `.env` file and define the necessary environment variables:
 
 ```plaintext
 DATABASE_URL="postgresql://username:password@localhost:5432/dbname"
+PORT=5000
 ```
 
 Replace `username`, `password`, and `dbname` with your PostgreSQL username, password, and the name of the database you created.
 
-### 3. Install Dependencies
+### 4. Install Dependencies
 
 Run the following command in your project directory to install required dependencies:
 
     npm install
 
 This command installs all the packages defined in your `package.json` file (both dependencies and devDependencies).
 
-### 4. Run Migrations
+### 5. Run Migrations
 
 To synchronize your database schema with your Prisma model and update the Prisma Client, run:
 
     npx prisma migrate dev
 
 This command applies all pending migrations to your database and updates the Prisma Client to ensure it matches the new schema. This is crucial for keeping all developers' environments in sync with the latest database schema.
 
-### 5. Start the Development Server
+### 6. Start the Development Server
 
 Start your development server by running:
 
     npm run dev
 
 This command starts the server using `nodemon`, which will automatically restart the server if any changes are detected in your source files.
 
-### 6. Access the Server
+### 7. Access the Server
 
 Once the server is running, it will be accessible at:
 
     http://localhost:5000
 
 You can access your API endpoints via this URL using a web browser or tools like Postman for testing API requests.
 
+## Prisma Commands
+After updating the Prisma schema, you have to generate migrations to keep your database schema in sync with your application's data model. Use the following command:
+
+``` bash
+npx prisma migrate dev --name migration-name
+```
+
+For example, if you add a new model called `DonatedItem` to your Prisma schema, you can run:
+
+``` bash
+npx prisma migrate dev --name create-donateditem
+```
+This command creates and applies a new migration based on the changes in your Prisma schema, ensuring your database schema is up-to-date.
+
+
 ## Additional Information
 
-- **Keeping Schema in Sync**: It is important to run migrations whenever changes are made to your Prisma models. This keeps your database schema in sync with your application's data model (relevant commands will be added here soon).
+- **Keeping Schema in Sync**: It is important to run migrations whenever changes are made to your Prisma models. This keeps your database schema in sync with your application's data model.
 - **Environment Variables**: Ensure that your `.env` file is never committed to your version control system. Add it to your `.gitignore` file to prevent it from being uploaded to shared repositories.

server/src/index.ts

@@ -42,7 +42,7 @@ const startServer = async () => {
         );
 
         // Start the server
-        const port = process.env.PORT || 5000;
+        const port = process.env.PORT;
         app.listen(port, () => {
             console.log(
                 `[${timestamp}] Server running on http://localhost:${port}`,