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!
