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.
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.
- 🌟 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
- 🔑 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
| 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 🌐 |
- 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. 🏗️
.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 testingMake sure you have the following installed before running the project:
- 🟢 Node.js (v14 or above)
- 📦 npm (comes with Node.js)
🅰️ Angular CLI (globally installed)
git clone https://github.com/yourusername/dfs-bfs-graph-traversal.git
cd GRAPH-TRAVERSALnpm installcd backend
npm installFrom the backend directory, start the backend:
node server.jsAlternatively, you can use nodemon for automatic restarts:
npm install -g nodemon
nodemon server.jsGo back to the project root (GRAPH-TRAVERSAL) and run the Angular development server:
ng serveYour frontend will be running at http://localhost:5000 🌐.
To ensure the reliability and functionality of the project, follow these testing instructions:
- Navigate to the frontend directory:
cd src - Run the unit tests:
ng test
- 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
- 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.
- 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.
- 🖱️ 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.
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.
- 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
| 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. |
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.
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.
-
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.
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.
- 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.
| Contributor | Contributor | Contributor | Contributor |
|---|---|---|---|
 |
 |
 |
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
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.
for this project!
Feel free to connect with me on social platforms:
