Skip to content

second-slip/birder-client

Repository files navigation

birder-client

This is the Angular 19 client app for the Birder website.

Node.js CI GitHub Workflow Status codecov Known Vulnerabilities

Birder is a social network-style platform for logging, sharing, and analysing bird observations. Ultimately, the aim is to feed the data to an algorithm which will help with species identification.

The complementary server respository is birder-server.

Change Log

  • 20/11/2024: updated to Angular version 19
  • 01/06/2024: updated to Angular version 18
  • 29/05/2024: experimenting with signals API (see select-species service & component)

Open a demo in GitHub Codespaces

Run a working version in a fully-configured dev environment with Codespaces.

Move to the 'working' or 'codespace' branch. Click the green 'Code' button, then the 'Codespaces' tab. Click the '+' to create a codepace. See the screenshot:

Step 1: start the codespace (click for details)

Start the codespace

Move to the 'working' or 'codespace' branch. Click the green 'Code' button, then the 'Codespaces' tab. Click the '+' to create a codepace. See the screenshot:

Screenshot

step-0-screenshot

Step 2: start the fake API (click for details)

Start the fake server

A fake birder-server REST API is provided using a json-server implementation. Start the fake server in the terminal with npm run api. It will start on http://localhost:3000. It will respond with fake data to enable users to sample the website.

npm command
npm run api
Screenshot

step-1-screenshot

Step 3: serve the website (click for details)

Serve the website

After starting data server, open a second terminal window and type npm start to serve the website. Then access the website in the browser on http://localhost:4200.

Some Code

npm start
Screenshot

step-2-screenshot

Step 4: use the website (click for details)

Explore the website

The website will open at the login screen. Type a fake email address (e.g. '[email protected]') and a fake password and click the 'Login' button. The website will open the main home screen for logged in users, which is the 'observations feed'.

Screenshot

step-3-screenshot