This is a backend API for a demo app that (more or less) is Instagram from scratch.
It's built using Laravel. There are very few frontend views. Visiting the webroot will just show Laravel's default
front page. However, Laravel Telescope is installed and can be visited at /telescope
. Authentication is handled using
Sanctum to manage tokens, and some basic user registration boilerplate inspired by Laravel Breeze's source code.
Note that this API must be up and running before attempting to run the mobile app as it's expecting to be able to talk
to the server
The basic functional overview consists of:
- User registration and login
- Image upload and metadata storage
- Data stored in SQLite database (located in
/database/database.sqlite
)
Additionally, a postman collection and environment file are included in the project root:
- InstaJam API.postman_collection.json
- InstaJam API.postman_environment.json
The quickest way to get this API running (on a Mac at least) is to download and install (Laravel Herd)[https://herd.laravel.com] However if you would prefer to use Valet or Sail that should be fine too (though note that I have not tested either directly) as there are no special modifications to be made to allow the application to run.
If you're on Linux, you'll probably know what to do. If you're on Windows, Sail is your best bet as I hear docker is pretty decent on Windows these days. Haven't tried it directly.
Firstly, clone the repo, when done. Open up the terminal, navigate inside and type the following to install the framework.
composer install
Once this has finished, duplicate the .env.example
file - renaming it .env
.
cp .env.example .env
Next, to set up the database file navigate to the database directory and create a new sqlite database
cd database
touch database.sqlite
Inside the .env
, set the DB_DATABASE
path to be the absolute path to the SQLite file:
DB_DATABASE=/absolute/path/to/instajam-api/database/database.sqlite
Back in the root directory, set up Laravel's security key:
php artisan key:generate
NOTE: Some steps may differ from here on in if you are not using Herd or Valet.
Start the Laravel Herd desktop application (which runs largely in the top bar - it's the big H icon). In the root directory run:
herd link # OR valet link if you're using Valet
This will allow the server to be served up at the local url http://instajam-api.test
. (or something
similar based on the folder name chosen when cloning the repo). You should add this to your .env
file
APP_URL=http://instajam-api.test
Finally you can run:
php artisan telescope:install
php artisan migrate
php artisan storage:link
You may also need to manually create a photos
directory inside storage/app/public
cd storage/app/public
mkdir photos
To verify that the server is up and running, you should be able to visit http://instajam-api.test/telescope
in your
browser and see the telescope interface running. If you do, you should be ready to go.
If you plan to test the app on Android, you will need to take an additional step, which is to create a tunnel using Expose or Ngrok make the server available over the internet.
NOTE: THIS ONLY NEEDS TO BE SETUP IF TESTING ON ANDROID. iOS TESTING DOES NOT REQUIRE THIS
This is because, Android is completely isolated from
the host system - meaning, the only connection it can make to the localhost server is by using the IP 10.0.2.2.
But because the server is not running on localhost (unless you are using Laravel Sail), you will need to tunnel out, and
use Expose/Ngrok's HTTPS (NOT HTTP) url as the API_URL
in the React Native app's .env
file.
In this instance, I used Expose. To create the tunnel go to https://expose.dev/register and register for an account if you don't have one already. When signed in, it will present a list of steps. Just copy the token from Step 2, and open up Herd's settings in the Herd topbar menu.
In the "Expose" section, paste the token in the text input and close the settings window.
Then, take the command listed in Step 4:
expose share http://localhost --subdomain=yourusername
And customise it to the address you use locally e.g.
expose share http://instajam-api.test --subdomain=yourusername
If configured correctly it will give out public links to be used. Copy the HTTPS one and paste it into the React Native app's .env
file.
A number of things either uncompleted or problems that may be noticable:
- Form requests. I have not put up any guards around the authorize method on form requests - this is simply due to time constraints.
- Data sanitisation. While there isn't much data coming in, setting up sanitisers is a nontrivial process, and would be overkill for the current featureset
- User management: Using fortify to handle this might have been a better route than rolling my own. However, Fortify can sometimes be difficult to work with in a hurry. Any re-implementation or refactoring of user related management, I'll likely take that route
- Protected photo routes. For speed I had to serve all uploaded photos from the public folder, which means anyone with the URL can view. Ideally this should be restricted by user and require a token, but it is fiddly to set up. May do so later
- Token expiry. It would be useful to set an expiry on tokens and have the expiry date updated each time the token is recieved so that tokens don't "have" to expire, but can if they are not used for a certain amount of time (e.g. 30 days)