🥷🏽 Angular Trip Planner Project

A Trip Planner project with Angular and TypeScript. Teammembers:

• Jarne Dirken
• Sohaib Ibenhajene
• Jen verboven
• Chadi Abdelghani Idrissi

📦 Technologies

• Angular
• TypeScript
• CSS
• C#
• .NET
• Auth0

🦄 Features

Here's what you can do with our Trip planner:

• Viewing public trips: Trips that are public can be viewed by everyone that has access to the website.

• Create an account: You can create an account and view your personal data.

• Create a trip: You can create a personal trip. You can make this trip public if you want or share it with friends and family. You can add a budget to your trip in different currencies.

• Share a trip: You can invite friends / family by inviting them with their e-mail.

• Create an activity: You can create an activity and add a cost to it as well.

🔐 Login

• Login as normal user: user1@example.com & 6X^J7w6WMmxKKW

👩🏽‍🍳 The Process

We started with a project, a trip planner. We went and did research on what most trip planners have / can do. Then we jumped in making a basic layout.

One of our team members made the basic template for the front-end in Angular. Another one did this for our backend in .NET. The other 2 started working in Figma, creating screens on how the website is going to look like.

When that was finished we wrote some basic API calls and started creating a mock database so we could actually test with our data.

There were some requirements that we had to meet in order to pass for this project. We used an external API (google) so we can get images and autocomplete when trying to enter a place where you want to go. This feature is removed afterwards because of the limited API calls that you can make before we have to pay for it.

Now we could create a trip, then someone started working on creating activities in that trip while others worked on design or features like seeing how many views a trip has, loggin in with auth0, profile page ect...

Finally we did some layout changes so it matched our figma and fixed some bugs here and there.

📚 What I Learned

During this project, I've picked up important skills and a better understanding of complex ideas, which improved my logical thinking.

🧠 Brain:

• Logical Thinking: Working with an .NET api for the first time and connecting it to our front-end while using more services like auth0 our google api while keeping everything "secure" required some logical thinking.

📏 Team coordination:

• Working as a team: Wokring as a team is very important, this project really helped me thinking about being in a team. I know that sounds weird but a new team means new people and all people work differently. I was really lucky to have an amazing team that worked really well with each other. No time wasted, we helped each other. It was a great fit!

🎨 Discovering Figma:

• New Tools: First time using Figma was a bit rough at the start but after some time really makes you appriciate what it can do.

⌚ Time management:

• Using scrum board: Keeping track of all our tasks using a scrum board really made everything organised. For this project we used Trello.

📓 New knowledge:

• Angular: First time using the angular framework and I'm really happy with it. It is such a great framework and I feel like we only just got started. Really looking forward to make more projects with angular in the future.
• .NET API: First time using .NET for api and database. I liked it very much, so many features available.
• Auth0: First time using auth0 for authentication. It took some time trying to figuere it out but it was a great experience.
• Azure: First time using Azure for hosting our backend. It was quite a great experience and easy to figuere out.

🎡 Security:

• API Security: Here I learned how to "secure" an api with users that are logged in. So you can't make api calls from other users or when you're not logged in.

📈 Overall Growth:

Each part of this project helped me understand more about building apps, managing complex information, and improving user experience. It was more than just making a trip planner. It was about solving problems, learning new things, and improving my skills for future work.

💭 How can it be improved?

• Better api security
• More user friendly
• Styling the application more
• Implementing more features

🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Run npm run start or yarn start to get the project started.
4. Open http://localhost:8000 (or the address shown in your console) in your web browser to view the app.

🍿 Video

https://github.com/JarneDirken/2024-Angular_Project/video/...