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.
- 🔑 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 from developers of all experience levels. Please refer to the CONTRIBUTING.md file for guidelines.
- 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.
for this project!