loading...
Cover image for How I built a real world project for the first time 🌈

How I built a real world project for the first time 🌈

killianfrappartdev profile image Killian Frappart ・9 min read

I have been learning web development for a year and I have just delivered my very first MVP for a client, this is a huge step forward in my journey to become a real world developer.

In this article, I will write about the building process and design thinking in general. This is not a tutorial by any means, I will simply share my experience with anyone interested.

Table of contents

  1. Project Introduction
  2. Tech Stack
  3. Wireframe & Design
  4. Data modeling
  5. Project Organization
  6. Sprint 01: Frontend
  7. Sprint 02: Backend
  8. Sprint 03: Implementing features
  9. Sprint 04: Fix & Deploy
  10. Conclusion

Project Introduction 👋

Let me introduce the project first. We have to build an MVP for a mobile app that works on both Android and IOS. This app's name is Allergio and aims to make people with food allergies' life easier.

Thanks to Allergio, you can create a profile for your relatives, register their allergies and share their profiles with your contacts.

The core feature is the scanner. Open up your phone's front camera, point it towards any food product and a list of the potential allergens will be displayed.

In order to complete this mission, I teamed up with my friend Walid. He is a talented growing JavaScript developer, and it is a pleasure to share this experience with him.

Tech Stack ⚛️

To build this app, we decided to rely on the very popular MERN stack which includes:
➡️ MongoDB
➡️ Express
➡️ React Native
➡️ Node

Although these are technologies I am familiar with, I never worked with React Native and I don't know much about Mobile development concepts.

We are considering AWS and Heroku to host the Backend part and for file management but I will provide more details in the Fix & Deploy section.

It already sounds like a great and exciting challenge 🤩

Here is a list of tools I usually work with to enhance my programming experience:
➡️ OS: MacOS
➡️ Terminal: iterm2
➡️ IDE:VSCode
➡️ Versioning: Git
➡️ Package Manager: NPM
➡️ iOS Emulator: Xcode
➡️ Andorid Emulator: Android studio
➡️ Communication: Slack
➡️ Project Organization: Trello

Wireframe & Design 🎨

Our client Xavier provided simple wireframes and we reworked them a little to make it look "modern" and improve UI/UX.

We mainly worked with Figma which is a great tool that I 100% recommend. Let me show you a few examples.

Splash Screen:
Alt Text

Login Screen:
Alt Text

Of course, we redesigned the app following 2020's mobile development conventions, and we took inspiration from famous applications such as Yuka, Shazam, Spotify, ...

Data modeling 💾

Since we are building a Full-Stack application, we must store and manage data. It would be crazy to jump into the coding process without a clear and well-designed action plan.

What kind of data are we playing with:

Users 👤

{
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  name: { type: String, required: true },
  lastName: { type: String, required: true },
  image: { type: String },
  profiles: [{ type: mongoose.Types.ObjectId, ref: 'Profile' }],
  allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
  contacts: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
}
Enter fullscreen mode Exit fullscreen mode

Profiles 👨‍👩‍👧‍👦 (Created by the user for his relatives)

{
  name: { type: String, required: true },
  image: { type: String, required: true },
  allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
  readers: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
  owner: { type: mongoose.Types.ObjectId, ref: 'User', required: true }
}
Enter fullscreen mode Exit fullscreen mode

➡️ Allergens 🥜

{
  name: { type: String, required: true },
  image: { type: String, required: true },
  description: { type: String, required: true },
  reaction: { type: String, required: true }
}
Enter fullscreen mode Exit fullscreen mode

PS: Unique IDs are provided by MongoDB by default.

Awesome, we now know what our data looks like but this is not enough. To make our app able to create, read, delete and update data, we must give it the chance to communicate with our server.

You might already know it, Express makes it really easy to build Rest API and that is exactly what we are about to do!

If you are not familiar with API architecture, I recommend you skip this section.

API routes:

Users 👤 ⏩ /api/users/
➡️ (GET /:uid ) Get user by ID.
➡️ (POST /signup ) Create user account.
➡️ (POST /login ) Log user in.
➡️ (PUT / ) Edit user information.

Profiles 👨‍👩‍👧‍👦 ⏩ /api/profiles/
➡️ (GET /:uid/all ) Get all profiles of user.
➡️ (GET /:pid ) Get profile by ID.
➡️ (POST / ) Create a new profile.
➡️ (PUT /:pid ) Edit profile information.

Contacts 👥 ⏩ /api/contacts/
➡️ (GET /:uid ) Get user's contacts.
➡️ (POST /search ) Search new contacts.
➡️ (POST /share ) Share profiles with contact.
➡️ (POST / ) Add a contact.
➡️ (DELETE / ) Delete a contact.
➡️ (POST /unshare ) Unshare profiles with contact.

Allergens 🥜 ⏩ /api/allergens/
➡️ (GET /:aid ) Get allergen by ID.
➡️ (GET / ) Get all allergens.
➡️ (GET /name/:name ) Get allergen by name.

We are almost good to go, before you head to the next section, I want to have a quick word about file management.

This is one of the trickiest topic we came across when building Allergio and I thought it would be interesting to share the solution we came up with.

Here is the problem: how to store images ?

Uploading images directly to the database would slow it down and most image hosting services require you to pay monthly fees.

We decided to build a very simple custom image uploader service that stores images on the server itself and provides a URL to fetch them. This simple server is hosted on an Ubuntu instance running in the cloud.

This is definitely not the best solution but considering the huge amount of work we have to achieve in a relatively short period of time, it does the job.

Project Organization 🗂️

I will never tell this enough: Organization is the key! 🔑

The organization relies mostly on the Agile Methodology because we were introduced to it during our coding bootcamp.

The building process is split in 4 sprints of 5 days (each sprint has its own section) and every one of them must have clearly defined tasks.

On Monday morning, we used to group up to establish an exhaustive list of tasks for the whole week. We used Trello to create little cards for every task.

Alt Text

Every Friday, there was a meeting with our client. He was always happy to have a little demo and thanks to his weekly feedback we could finally deliver a product close to his initial expectations.

Moreover, we tried to stick to daily stand-up in the morning and day retrospective around 5.30 pm.

There is another organization key point whenever you start a brand-new project and it is workflow setup.

We are working with GitHub following Git flow's recommendations as much as possible.

➡️ Not familiar with Git flow ? No worries, have a look to my article! 🧐

Finally, let me show you the folder structure we worked with:

Allergio 📂

  • Backend/
    --- controllers/
    --- models/
    --- routes/
    --- utils/
    --- middlewares/

  • Frontend/
    --- app/
    ------ assets/
    ------ components/
    ------ screens/
    ------ context/
    ------ utils/
    ------ navigation/

Sprint 01: Frontend 📲

Time has finally come to start coding! 🔥

Alt Text

Shout out to Expo that litteraly made this project possible. Expo is a framework for React applications, it provides a set of tools to start building your application in a matter of minutes and hides most of the complexity when setting up a new project.

It was very scary at first to work with React Native because we never used it before but Expo's documentation is well-written and I felt like doing mobile development forever in a couple days only.

After we initialized the project, setting up in-app navigation is a great starting point. Very similar to React Router for Web, React Navigation is a great library that is easy to get started with and provides a good solution for every use cases.

We decided to implement a bottom tab navigation for optimal user experience:

Alt Text

Another important step is to setup a global context. Every React developer knows how tidious it might be to lift state up through props when you project is growing bigger.

To answer that need of a global state, we went for React Context mainly to store user information such as name, last name, image and wether he is logged or not.

Everything seems to work fine so far, let's build our screens and components. We have about 10 screens to build (There is inner navigation for each tab) and around twice as much components like buttons, cards, inputs, bottom sheets and much more.

At this point, we are working with dummy hard coded data. Our components are mostly function components and their state is managed with React Hooks.

Hopefully, we have enough time to implement camera features and request to an external API to gather information about food products before the end of the first sprint.

Sprint 02: Backend 📊

As I mentionned before, this project's backend is a Node/Express Rest API linked to a cloud MongoDB database.

In order to make it work, we start by installing dependencies such as cors, body-parser, mongoose, nodemon, ...

When working with MongoDB, I highly recommend you work with mongoose as well. It makes your life so much easier. Define mongoose models for your data, connect to the database and you are good to go ✅

Alt Text

Then, we register routes just like I already explained here and connect each route to a dedicated controller.

Every controller's behavior must be tested and for that you can give Postman a try.

Alt Text

Finally, we improve our server's robustness with proper error handling middleware and enhance development experience with nodemon and environement variables.

Sprint 03: Implementing features ⭐

This is by far the most exciting week, when we finally see the result of everything we did before.

We spend this entire week connecting Frontend user interface to Backend controllers via HTTP requests and update the database in real time.

HTTP request are done using Axios which is a personnal preference.

There are many features to implement this week:
➡️ Login/Signup with Email and password.
➡️ Create and update profiles.
➡️ Edit user information.
➡️ Add/remove contacts.
➡️ Share profiles with contacts.
➡️ Upload images from phone's gallery.
➡️ Send SMS to invite friends.
➡️ ...

Native functionnalities such as SMS, camera and photo gallery could be implemented thanks to Expo's incredible doc 🌟

Alt Text

Sprint 04: Fix & Deploy ☁️

Last week of this incredibly enriching adventure. I already learned a lot and spent so much time and energy. We are getting tired but there is still work to do before we send our project to the client.

Thousands of lines are waiting to be refactored and plenty of little bugs still remain. Let's start by cleaning this up and fixing as many style issues as possible.

AWS has a cloud service called EC2. We create an Ubuntu instance and connect via SSH. After a bit of setting things up, our server and image manager are running in the cloud.

Right now, the app is only available through Expo's hosting but we are looking to deploy it on App store and play store soon.

Conclusion ✅

Four intensive weeks have passed, we are tired, the project is still a little buggy but the client is happy and that is what matters the most.

In my opinion, my friend Walid and I did a great job here, working on a real project for the first time and facing obstacles made us better developers.

I wanted to provide a link to the app's demo or source code with this article but since this project is in the alpha phase, the client would like to keep some information confidential.

Thank you very much for reading!

I would love to have a feedback from you, any tips to improve as a developer or as a blogger is very appreciated 😇

Discussion

pic
Editor guide
Collapse
cyantarek profile image
Cyan Tarek

Wonderful article.

But I am missing something.

You didn't tell us how did you go for the actual requirements process?

  1. How did you understand what to build from client?
  2. How did you prepare requirements?
  3. How did you prioritize them?

And last but not least, at which point did you gather the requirements? Before UI/UX Design and Data Modeling?

How did you model the data and design the UI? Based on features?

Please share, or write a new article about this since this is the first step where new comers stumble upon.

Thanks

Collapse
killianfrappartdev profile image
Killian Frappart Author

Hello Cyan,
It is a very interesting point you raises here! I should have explained in the introduction, we had a long meeting with the client before we officialy start the project where we discussed together what features to build and how the app should look in the end.
Moreover, we had a weekly meeting to check that the project is going in the right direction.
Lastly, we organized our work and filter requirements according to what we are able to do as junior developers.
Thank you for reading, I hope this answered your question! 😇

Collapse
eric profile image
freePean

This articler worked one year.

Collapse
alejogb1 profile image
Alejo Garcia

Can I collaborate doing the landing page? I really think I can give you some help on the landing page, adding illustrations and some good design. This is great, I like to see when projects turn out to be practical examples. This is my github: github.com/Alejogb1 and one of the websites I currently run: iosaprovall.com/

Collapse
killianfrappartdev profile image
Killian Frappart Author

Hello Alejo,
Thanks a lot for your enthusiasm!
I am not responsible of the landing page at all, it has been made by my client before I took part in the project.
I can let him know about your offer if you want.
Have a great day!

Collapse
codewithgauri profile image
gaurav pandey

Great information loved your content, I have also started writing post about Opensource, Github, Android dev, Webdev, IoT, Cloud etc.
you can check it out here
Codewithgauri

Thanks :)

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you!
Your blog looks great, keep up the good work 🔥

Collapse
codewithgauri profile image
gaurav pandey

thank you :)

Collapse
meganpaffrath profile image
Megan Paffrath

I really enjoyed this read! I am working to become a full stack developer and I really like the organization of this project. I think it is important to get most of the planning and design done before making a project, great work! I look forward to seeing what else you do!

Collapse
killianfrappartdev profile image
Killian Frappart Author

I really appreciate your comment Megan! In my opinion organization is more important than the code itself. Thank you for reading and I wish you best of luck.

Collapse
kenrogers profile image
Ken Rogers

This is an awesome write-up, and kudos to you for building a real-world project as an aspiring dev. That's huge! Most people stick with building little toy apps or apps built following courses or tutorials, building something on your own that solves a real problem is a huge step, congrats!

Collapse
killianfrappartdev profile image
Killian Frappart Author

I know what you are speaking about! There are dozens of dummy app on my GitHub 😂 You can imagine how satisfying it is to finally build something worthwile!

Collapse
devdufutur profile image
Rudy Nappée

Another important step is to setup a global context. Every React developer knows how tidious it might be to lift state up through props when you project is growing bigger.

Do you know constate ? It's a great library to lift state up easily at any time.

github.com/diegohaz/constate

Collapse
killianfrappartdev profile image
Killian Frappart Author

I have never heard of this package before, thank you for sharing I will have a look ✅

Collapse
billraymond profile image
Bill Raymond

I’m thinking about developing an app that just came to mind recently and your article is amazing! Thank you for taking so much time to walk through the logistics of working on such a project! So many people glaze over what technologies are used or how thework gets managed. Great job!

Collapse
killianfrappartdev profile image
Killian Frappart Author

I could not be happier if my article somehow helped you get started with your app! Thank you for your feedback Bill😇

Collapse
ridhikgovind profile image
Ridhik Govind

This post have given me an overview about how things work in real life. Thanks !

Collapse
killianfrappartdev profile image
Killian Frappart Author

I am glad that my article helped you anyhow 😁

Collapse
vpxavier profile image
vpxavier

Hello Killian,
What an amazing journey. I want to thank you and Walid for reaching the objectives in only a few weeks: validating the MVP and changing it to a working prototype. There is still a lot of work to do to turn in into an app in production but I am now sure that Allergio (allergio.net) will help a lot of families when its final version will be released. Thanks a lot for your work!

Collapse
killianfrappartdev profile image
Killian Frappart Author

Hello Xavier,
Thank you for trusting us, it was a great challenge, we learned a lot and we could not dream of a better project to work on.
As you said, there is still a lot of work to do before production and I wish you the best.

Collapse
juandave25 profile image
juandave25

I really enjoyed read this article , you learned a lot with this project in every aspect since planning , development and implementation, big congratulations for you.
If you need help with future projects,I would like to have the chance of working with you.
Best regards

Collapse
longreede profile image
de Longrée Laureline

This is impressive! Well done!

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you very much! 😇

Collapse
yanislem profile image
Lemfadli

Congratulations Killian 👏🏼👏🏼👏🏼What a job !! I'm very impressed 👨🏻‍💻🦇

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you for your support my friend! 🦇🦇🦇

Collapse
aizuliswafaza profile image
aizuliswafaza

Good article

Collapse
kmhmubin profile image
K M H Mubin

Wow. I learn a lot from one article

Collapse
killianfrappartdev profile image
Killian Frappart Author

Comments like this one make me want to write more often 😊

Collapse
lucasfaria10 profile image
lucasfaria10

Very motivational for people like me, who started in the MERN stack a few days ago!!! Thanks and congratulation!!

Collapse
killianfrappartdev profile image
Killian Frappart Author

You can't go wrong with the MERN stack! Huge community support, gentle learning curve and tons of possibilities. Good luck 😇

Collapse
moscosolenin profile image
Lenin Moscoso

Wow awesome how I have learned so much in just one article. Thank you very much I wish you the best.

Collapse
killianfrappartdev profile image
Killian Frappart Author

I am glad you learned something from me! Have a great day 😇

Collapse
sebavillegas profile image
SebaVillegas

Nice work! Thanks for sharing!

Collapse
kacpersokolowskidev profile image
Kacper Sokolowski

Well done bro, great project and amazing results ! I'm excited to see what you'll do for the next project ! Cheers

Collapse
killianfrappartdev profile image
Killian Frappart Author

Hopefully we build the next project together Kacper 🔥

Collapse
kacpersokolowskidev profile image
Kacper Sokolowski

Yes ! It would be awesome 😆

Collapse
greg155 profile image
Gregory Akhun

Hi Killian,
It’s a great work you have done for this project.
Congratulation!

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you sir Akhun 😊

Collapse
auloryn profile image
Auloryn

Wow you worked so hard, you must be proud! Congratulations for your achievements!

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you for reading 😁

Collapse
antoinemeunier52 profile image
AntoineMeunier52

really good game man for your project

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you buddy!

Collapse
hama05 profile image
Hippo.op

Amazing, good job ! :)

Collapse
ivanrusanov profile image
Ivan Rusanov

Thanks for this beautiful article! It was really interesting to read. But how do you estimate what food is in the photo?

Collapse
killianfrappartdev profile image
Killian Frappart Author

That is a really interesting question Ivan! I should have explained that feature with more details. We rely on an external API. We can use the user's front camera to read product's barcode and send a request to the API which answer with information about ingredients, allergens, etc ...
I hope that answered your question 😇

Collapse
sanaanoua profile image
sanaa jebroun

Congratulations! keep going!

Collapse
killianfrappartdev profile image
Killian Frappart Author

Thank you Sanaa !