🧭 DFS-BFS Graph Traversal

This project implements Depth-First Search (DFS) and Breadth-First Search (BFS) algorithms for graph traversal. The backend includes user authentication functionality with a Login and Signup page. The project currently stores user data in local storage.

🔮 Future Upgrades Await

This is just the beginning! With plans to incorporate advanced algorithms (Dijkstra's, A*) 🧠, user dashboards 📊, and mobile-friendly features 📱, we’re on the path to making this project an indispensable tool for graph lovers everywhere.

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Close PRs

This project is now OFFICIALLY accepted for

📑 Table of Contents

🌟 Features
🛠️ Technical Stack
📝 Changelog
📂 Project Structure
⚙️ Prerequisites
🚀 How to Set Up and Run the Project
🧪 Testing Instructions
🔐 Login and Signup Pages
🖥️ How the Server Works
📊 Graph Feature
🗺️ Roadmap
🤝 Contribution Guide
👥 Our Contributors
📜 License

🌟 Features

🔑 User Login and Signup system
🔍 DFS and BFS graph traversal algorithms
💾 Data persistence using LocalStorage
🖥️ Frontend built with Angular
🔧 Backend using Node.js with Express.js

🛠️ Technical Stack

Component	Technology
Frontend	Angular 🅰️
Backend	Node.js 🟢, Express.js ⚙️
Authentication	LocalStorage 🔒 (with plans to integrate OAuth 🔑)
Database	LocalStorage for user data 💾 (future plans for database integration 📊)
Graph Algorithms	DFS and BFS implemented for traversal 📈
Deployment	Netlify configuration for frontend 🌐

📝 Changelog

Version 1.0.0 (Initial Release)

Implemented DFS and BFS graph traversal algorithms. 🔍
Added Login and Signup pages with user data stored in LocalStorage. 🔑
Basic project structure setup with Angular for the frontend and Node.js/Express.js for the backend. 🏗️

📂 Project Structure

.vscode/                    # Contains workspace settings for VSCode
backend/                    # Backend directory (Node.js/Express)
public/                     # Public assets like images, logos, etc.
src/                        # Angular application source code
.editorconfig               # Editor configuration for consistent coding style
.gitignore                  # Git ignore file to exclude certain files from being committed
CODE_OF_CONDUCT.md          # Code of conduct for contributors
CONTRIBUTING.md             # Guidelines for contributing to the project
README.md                   # Project documentation file
angular.json                # Angular workspace configuration
netlify.toml                # Configuration for deploying to Netlify
package-lock.json           # Locked versions of installed npm dependencies
package.json                # Project metadata and npm dependencies
tsconfig.app.json           # TypeScript configuration for the app
tsconfig.json               # General TypeScript configuration
tsconfig.spec.json          # TypeScript configuration for testing

⚙️ Prerequisites

Make sure you have the following installed before running the project:

🟢 Node.js (v14 or above)
📦 npm (comes with Node.js)
🅰️ Angular CLI (globally installed)

🚀 How to Set Up and Run the Project

🛠️ Step 1: Clone the Repository

git clone https://github.com/yourusername/dfs-bfs-graph-traversal.git
cd GRAPH-TRAVERSAL

🛠️ Step 2: Install Frontend Dependencies

npm install

🛠️ Step 3: Navigate to Backend Directory and Install Backend Dependencies

cd backend
npm install

🛠️ Step 4: Run the Backend Server

From the backend directory, start the backend:

node server.js

Alternatively, you can use nodemon for automatic restarts:

npm install -g nodemon
nodemon server.js

🛠️ Step 5: Start the Frontend Server

Go back to the project root (GRAPH-TRAVERSAL) and run the Angular development server:

ng serve

Your frontend will be running at http://localhost:5000 🌐.

🧪 Testing Instructions

To ensure the reliability and functionality of the project, follow these testing instructions:

Unit Testing

Navigate to the frontend directory:
```
cd src
```
Run the unit tests:
```
ng test
```

End-to-End Testing

Install Protractor (if not already installed):
```
npm install -g protractor
```

Start the Protractor server:

webdriver-manager update
webdriver-manager start

Run the end-to-end tests:
```
ng e2e
```

Manual Testing

After running the application, perform manual testing by interacting with the Login and Signup pages to ensure functionality.
Test the graph traversal features by creating graphs with various nodes and edges, checking for expected behavior.

🔐 Login and Signup Pages

The Signup Page allows users to register by entering a username and password, which is stored in LocalStorage.
The Login Page checks credentials against the data stored in LocalStorage.

🛠️ How to Access Signup Details from LocalStorage

🖱️ Right-click on the Signup page and select Inspect.
🧰 Navigate to the Application tab in the developer tools.
📂 Under Storage, expand LocalStorage.
🔍 You’ll find the stored signup details there.

🖥️ How the Server Works

The backend server, built with Node.js and Express.js, handles:

🛡️ User Authentication: A basic registration and login system.
🔄 Graph Traversal: Provides APIs for DFS and BFS traversals.

📊 How the Graph Feature Works

Input your nodes. Make sure it is in A,B,... format. Comma is necessary
Input your edges. Make sure it is in the [to]-[from] format. Eg: 0-1
Click on create custom graph button 🔵
See how the magic happens

Example:

Output:

🗺️ Roadmap

Timeline	Milestone	Description
2024	Q4 2024	🔍 Enhanced User Authentication: Implement OAuth for third-party authentication (Google, Facebook) and improve security measures for password storage.
2025	Q1 2025	📈 Advanced Graph Algorithms: Integrate additional graph traversal algorithms (e.g., Dijkstra's and A*) and provide visualizations for different traversal methods.
	Q2 2025	🖥️ User Dashboard: Develop a dashboard for users to view their traversal history and saved graphs. Enable features for users to share their graphs with others.
	Q3 2025	📱 Mobile-Friendly Version: Ensure the application is responsive and works well on mobile devices. Create a mobile application version for iOS and Android.
	Q4 2025	🌐 Multilingual Support: Add support for multiple languages to enhance accessibility. Enable user-selectable language options in the application settings.

🤝 Contribution Guide

We welcome contributions of all kinds—whether it’s fixing bugs, adding new features, or improving documentation. Before you start contributing, please take a moment to review our guidelines to ensure smooth collaboration.

Getting Started

To contribute to this project, follow these steps:

Read the Contributing Guide: We’ve provided a detailed guide to help you get started with contributing. It includes all the steps you need to follow, from setting up the repository to submitting a pull request.

👉 Check out the Contributing Guide
Fork the Repository: Fork the project repository to your GitHub account, so you can make changes without affecting the original project.
Make Meaningful Changes: Whether you’re adding a new feature, fixing bugs, or improving documentation, ensure that your contributions are significant and add value to the project.
Write Clean Code: Follow the code style and best practices outlined in the project. Clean, readable, and well-documented code helps keep the project maintainable and easier to review.
Testing: If you're adding a feature or fixing a bug, ensure you write relevant tests to maintain the integrity of the project’s functionality.

Submitting a Pull Request

Once your changes are ready, you can submit a pull request by following these steps:

Commit Your Changes: Write descriptive commit messages that explain the changes you’ve made.
Push to Your Fork: Push the changes to your forked repository and create a new branch for your feature or fix.
Open a Pull Request: Navigate to the original repository and create a pull request, describing your changes in detail and why they are necessary.

By following these guidelines, you’ll ensure that your contributions align with the project’s goals and maintain a high standard. We appreciate your efforts in making this project better! 😊

For more detailed instructions, please refer to our full Contributing Guide.

Our Contributors ❤️

We extend our heartfelt gratitude for your invaluable contribution to our project! Your efforts play a pivotal role in elevating this project to greater heights.
Make sure you show some love by giving ⭐ to our repository.

Stargazers ❤️

Forkers ❤️

📜 License

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

By contributing to this repository, you agree that your contributions will be licensed under its MIT License.

📬 Feel free to contribute or open issues if you find any bugs!

Support

Don't forget to leave a star

for this project!

Go to Top

Connect with Me

Feel free to connect with me on social platforms:

Files

README.md

Latest commit

History