Web API and web application in one project vs separate projects

Question

I am completely new to the concept of servers, web APIs and web applications. I have a project where I need to design a Web API that allows clients to modify a database (hidden from the clients through the API).

And there is also a web application which has some functionalities. The web application also has to interact with the database.

So my question is, should I develop the Web API (Server) and the web application in the same project or two different projects?

I chose to implement the system using Mean stack for learning purposes. Mean stands for MongoDB, ExpressJS, Angular and NodeJS. As the Mean stack contains technologies to develop both the API and the Web app, am I supposed to develop all the code within one project and deploy it in my server or separate the Web API and the web application into two projects?

If it depends on the scenario, then to which kind of scenarios should I choose each and what are their pros and cons?

Answer 1

If shortly, Web API, it's backend, it's service, which you use in web application, and, web application, it's frontend, it's web site, which you see in your browser.

You can create one repo at github but server-side and client-side projects are separated.

You can choose the structure of your server-side and client-side projects depending on the purpose of your project. If you are going to create web application and then to develop mobile application (with ionic, for example) you should create web API separately. If you are going to create only the web application and to deploy your web application and web API to the same service (like heroku) you can make the same structure as in the heroku example (https://devcenter.heroku.com/articles/mean-apps-restful-api , also check the repo of this example https://github.com/chrisckchang/mean-contactlist-angular2 ).