aboutsummaryrefslogblamecommitdiffstats
path: root/README.md
blob: 9ccf1a9a8a850950500d3d2d46ce3a17a0c37623 (plain) (tree)
1
2
3
4
5
6
7
8
9
                         
 
                                                                                                                                                                                                                                         
 
                      
 
                                                         
 
                     
 

                                                                             
 
                    
 
                                                  
 



                                 
 
                                                               
 



                                    
 



                                    
 
                     
 
                             
 

                                                                                                                                                          
 
                           
 






                                                        
 

                                                                                                   
 

                                                                                                                      
 
                             
 

                                                                                                                                  
 

                                                                                                                          
 
                               
 
                        
 




                                  
 
                                                                     
 
                                   
 




                               
 
                                                                               
 
             
 



                                                                                                                
 
                       
 

                                                                                                                                  
 
               
 
                                                                                                 
# Admin Panel Application

    This project is a full-stack application built with React.js for the frontend and Node.js/Express.js for the backend. It includes user authentication using Firebase, routing using React Router DOM, and data storage using MongoDB.

    ## Getting Started

    To get started with this project, follow these steps:

    ### Prerequisites

    - Node.js and npm should be installed on your machine.
    - MongoDB should be installed and running locally or accessible remotely.

    ### Installation

    1. Clone the repository to your local machine:

       ```
       git clone <repository_url>
       cd admin-panel
       ```

    2. Install dependencies for both the server and the client:

       ```
       # Install server dependencies
       cd server
       npm install

       # Install client dependencies
       cd ../src
       npm install
       ```

    ### Configuration

    #### Server Configuration

    1. **Environment Variables**:
       - Create a `.env` file in the `server` directory and configure it with necessary environment variables (e.g., MongoDB URI, Firebase configuration).

       Example `.env` file:

       ```
       PORT=5000
       MONGODB_URI=mongodb://localhost:27017/admin-panel
       FIREBASE_API_KEY=your_firebase_api_key
       FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
       FIREBASE_PROJECT_ID=your_firebase_project_id
       ```

    2. **Database Setup**:
       - Ensure MongoDB is running. Modify the `MONGODB_URI` in `.env` to match your MongoDB setup.

    3. **Firebase Configuration**:
       - Update the Firebase configuration in `src/firebase/firebaseConfig.js` with your Firebase project credentials.

    #### Client Configuration

    1. **React Router DOM**:
       - Ensure routes are correctly defined in `src/App.js` using `BrowserRouter`, `Route`, and `Switch` from `react-router-dom`.

    2. **Firebase Integration**:
       - Ensure Firebase authentication and Firestore integration is set up correctly in `src/firebase/firebaseConfig.js`.

    ### Running the Application

    1. Start the server:

       ```
       # From the server directory
       cd server
       npm start
       ```

       The server should start on port specified in your `.env` file.

    2. Start the React application:

       ```
       # From the src directory
       cd ../src
       npm start
       ```

       The React application should start and open in your default web browser.

    ### Usage

    - The application includes user authentication using Firebase. Users can sign up, log in, and log out.
    - Private routes are implemented using `PrivateRoute.js` to protect routes that require authentication.
    - MongoDB is used for storing user data and other application-related data.
    - React components are organized under `src/components`, and Firebase configuration is under `src/firebase`.

    ### Troubleshooting

    - If encountering `react-chartjs-2` or other dependency-related issues, ensure all dependencies are installed (`npm install`).
    - Check console logs for errors related to Firebase initialization, React Router DOM setup, or MongoDB connection issues.

    ### License

    This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.