| 🎲Features | 🌇Cities-Autocomplete | 💻Tech Stack | 👨💻Technical Implementation | 🧑🤝🧑Our team |
- 🎬Getting Started
- 🎲Features
- 🌇Cities-Autocomplete
- 🏃How to run
- 💻Tech Stack
- 👨💻Technical Implementation
- 🎁Presentation
- 🧑🤝🧑Our Team
- A full-stack web application that simplifies and automates some of the aspects of planning a road trip.
- People organizing a road trip
- Any car traveler that would like to enrich his journey with additional interesting places.
You need to form teams of 3-5people. You will need to define one member as the Team Coordinator and the rest of the members as:
Front End Developer and /or Back End Developer and /or Database Developer.
- The application you need to build is a web app that gives the ability to users to register and login [10 marks]
- Your web application needs to be able to connect with a database either locally or remotely [10 marks]
- Your application must implement at least two roles[20 marks]
- Each rolemust have different tasks and views within the application [10 marks]
- The application must have the option to produce reporting views with (custom)filters [10 marks]
- The application must have a module that permits internal communication between internal entities which could be (implement at least one of the following): [20 marks]
a.Real time communication and/or
b.REST API - The application must support an e-payment process that:[20 marks]
a.Gives access to read some restricted material e.g. e-book or
b.Buy some goods, e.g. purchase a digital object
You will submit your project via the MS Teams application. All the members of your team need to submit the same project and the maximum number of members per team is five (5).
✔️ Google Maps integration
✔️ Fast Search Engine of start-destination cities of trip ( just in milliseconds ).
Almost all the cities in the world are included at this search engine.
✔️ A variety of available categories of places.
Short information about each wished place of chosen trip route.
✔️ Real-time communication
user and website support team through chat room.
✔️ Trips management panel.
✔️ Pay method with Paypal account.
✔️ Multi-role user scenarios
( unregistered user | registered user| administrator ).
✔️ User registration and login
with classic way( email and password)
✔️ Sign in with Facebook and Google account.
✔️ Simple contact form.
✔️ Admin Dashboard
with simplified tables of important data and statistics of our application
For more specific details and documentation about the service of autocomplete , you should go there
Extra useful resources about this service:
- Elasticsearch (youtube.link)
- Kibana (official website)
- Docker (dev.to)
1) Firstly, clone the repository.
2) In the Web.config change the connection string so that the "Data Source" matches your SQL Server.
3) Run City-Autcomplete service with Docker. (Please check the instructions in its repository on how to achieve this)
4) In the CreateTrip view replace the Google Maps API Key with your own (the existing key is now invalidated).
5) In the PlacesController replace your OpenTripMaps API Key with your own.
6) Finally,you are ready to run the application
Here are all the , used in project , programming languages and tools with their official recourses.
| Name | Website |
|---|---|
| HTML5 | w3schools |
| CSS3 | w3schools |
| Javascript Vanilla | mozilla.docs |
| Bootstrap | official site |
| Font Awesome | official site |
- The frontend of the application was built using HTML5, CSS3, vanilla JavaScript and Bootstrap 5
- All the forms is completed with validation and error messages.
- The template of web application was designed in a way so that each user with one-two clicks to start the application.
- Based of Bootstrap, we tried to make a repsonsive website.
- For the maps and directions we used Google's Maps JavaScript API, while for the places we used OpenTripMap API.
- The autocomplete feature was implemented through a basic custom-made autocomplete service, based on Elasticsearch. The service, which was developed for the purposes of this application, provides a basic free of charge combination of Google's Place Autocomplete and Geocoding API.
| Name | Website |
|---|---|
| SQL | w3schools |
| Microsoft Sql Server 2019 | Official website |
| Microsoft Sql Server Management(SSMS) | Official website |
- Wer have code-first approach in our project.At first, we made our models and with help of Entity Framework we builded our database with auto-migration configuration.The database used is a relational database on SQL Server.
- As seeding, we imported only the login information for the administrator user.
- For all the processes between our Asp.Net solution and the database SQL, we builded the repositories of TRIP and USER and embedded CRUD functions for these two primaries entities.
⚠️ Note: You must change the Connection String to connect with your database!!!
- ASP .NET MVC .NET Framework 4.7.2
- ASP .NET CORE WebApi
- Entiny Framework 6 (Code First)
- Repository Pattern
- LINQ
- Individual User Accounts
- Data Trasfer Objects(DTOs)
- View Models
- Asynchronous programming with async and await
- SignalR
- SMTP Email
- Paypal Sandbox
-
Authentication was achieved with the built-in authentication of ASP.NET MVC, using the solution template Individual User Accounts.
-
The live chat feature for instant messaging was implemented using SignalR and the payment feature was achieved using Paypal Sandbox, a simple environment to simulate real payments made through Paypal.
-
When necessary Task asynchronous programming was implemented in the controllers.
-
For data sent over API controllers and for data passed to Views, Data Transfer Objects (DTOs) and View Models were used respectively.
| Name | Official Website |
|---|---|
| Microsoft Visual Studio 2022 | 🔗 |
| Microsoft Visual Studio Code | 🔗 |
| Microsoft Teams | 🔗 |
| Docker | 🔗 |
| Postman | 🔗 |
| Github | 🔗 |
| Canva | 🔗 |
- Core functionality
- Data transfer
- Diagram ER
-
Our presentation of project is online available here
-
First design prototype of application can be watched here