kanarystack/aliascheck

Alias Check

ALIAS CHECK

The Alias Check helps confirm the availability of a username on different social networks. While it is intended as a learning project by the Tech Interviews Nigeria that would introduce participants to different technologies in fullstack development, ranging from frontend technologies like NextJS to NodeJS and SQLite or Postgres on the backend in addition to Docker for development, its utility is quite apparent. For example, small businesses can see the application in the selection of an available and catchy name among major social media platform.

This is project is structured so that the developer can choose to set it up with or without Docker.

PROJECT SETUP

With Docker Compose

To start the project using Docker, even from scratch, run the following command:

cp .env.sample .env
docker-compose up

Then go to http://localhost:3000/ to access the frontend or http://localhost:8080/ to access the backend

Backend-only Development

For backend developers that might only need to run the server and database, run the following command:

docker-compose up server

Frontend-only Development

For frontend developers who might not need access to the backend for the features they want to add, stop other services besides client after starting up:

docker-compose up && \
docker stop $(docker-compose ps --services | grep -v client)

Checkout docker-compose documentation on some of the commandline features available.

Without Docker Compose

Though this project was built for easy startup with Docker, it can also be run without Docker. You would need to run the commands on two terminals, one for the frontend and the other for the backend:

Frontend

On one terminal, go to the frontend folder named client, install dependencies and run the development server:

cd client
npm install
npm run dev

You should now be able to see the frontend at http://localhost:3000/

Backend

The backend requires authorization keys from the social media platforms that we support and will increase as time goes by:

• For twitter :Register for a twitter developer account at twitter developer account then create api keys. Of importance is the Bearer Token to which on our .env file populate the key TWITTER_BEARER_TOKEN

To start the backend application, make sure you have typescript installed on your system. Checkout https://www.typescriptlang.org/download. Once installed, run;

cp .env.sample .env
npm install
npm run dev

Access the application at the address http://localhost:8080/health

Testing

From the root directory;

npm run test

UI / UX Resources

You may find some useful resources for improving the UI / UX of the app here.

Architecture

This is roughly the architecture for the backend

aliascheck's Issues

Contributing Guide

One of the pillar of open source project is ability for others to contribute hence we need a contributing guide for both backend and frontend.

Check YouTube Username

We need an API that checks if a YouTube username is available or not.

Create Button Component

Buttons will be in two forms:

• Outline Button
• Solid Button

There should be no set width.
Use props to determine button type.
Define props type.

Create Input/Text Area Component

Could be used for;

• Email
• Username
• Text Area

Set up material UI && Integrate with Tailwind CSS

Acceptance Criteria

• MateriaUI is supported
• TailwindCSS is supported
• All media screens and font types are supported via TailwindCSS

Set up fullstack docker

We need a container image for the backend and a way to manage all the containers for development.

Create Benefits Component

Setup NodeJS Structure

Make API call give a response only when all request to available platforms are fulfilled

Can we make the Endpoint call to the Backend combine responses from all platforms as a single result?

This may help Promise.allSettled

Create Image Text Component

• Determine position of image or text (left/right) horizontally using a 'flipped' prop.

• Make text, image src dynamic.

Update Frontend to use ONLY Material UI

The Frontend is updated to use Material UI other than Tailwind CSS and Material UI combined.

Partha Roy would say

Actually we cannot compare Oranges with Apples, it all depends on the situation what is the best suited we have to choose that. There are other frameworks/libraries out there but this does not mean we have used all of them. Choose one and go ahead.

The idea is also to start simple and build on that as the project scales, for ease of collaboration.

Create components issues

Create issues for each component

Create Center Aligned TextBlock - Home page

Background Watermark Icons are not compulsory

Create a coming soon page

• Layout should match UI design
• Layout should compensate for major viewports

Add LICENSE

We need to select and add LICENSE to the repo.

Only Reviewer/Maintainer can merge/approve PR

We want to make only reviewer/maintainer can approver or merge PR @rwambui

Migrate /aliases to NodeJS

/aliases API endpoint is currently developed using Flask. The aim of the ticket is to migrate this to NodeJS

Stabilize README for migration of backend to NodeJS

The migration of the project's backend to NodeJS will cause breaking changes to be introduced. The current README will no longer be useful for onboarding participants. I propose we change the instructions for new participants to get up to speed by encouraging them switch to the most recent stable commit. This is would be done while the migration is ongoing and the README should be changed to reflect the NodeJS backend when migration is complete.

Add links to the figma design and other project rsources to the README

Update Project README with description

AC

• Visitors must be able to understand the goal of the project as well as how to contribute.

Check Snapchat Username

We need an API that checks if a snapchat username is available or not.

Check Instagram Username

We need an API that checks if an instagram username is available or not.

Update Backend Docker and Docker Compose

Create a frontend contribution guide

Create credentials for AliasCheck API endpoint usage

Use Case

1. I want to be able to consume endpoints on the front end.

2. I want to run docker-compose for Backend and DB and be able to use all integrated endpoints without setting personal developer tokens for each platform.

Backend Repo Setup

Setup flask project in the backend subfolder

https://flask.palletsprojects.com/en/2.1.x/quickstart/

Migrate /healthchecks to NodeJS

/healthchecks API endpoint is currently developed using Flask. The aim of the ticket is to migrate this to NodeJS

Fix Permission Denied error when running on Docker

I did not have any problem starting the project from scratch on another computer, but for some weird reason I started having some permission errors from the client service when I want to relaunch the project from my computer.

The error log looks like this:

client    | [Error: EACCES: permission denied, open '/usr/src/app/client/.next/package.json'] {
client    |   errno: -13,
client    |   code: 'EACCES',
client    |   syscall: 'open',
client    |   path: '/usr/src/app/client/.next/package.json'
client    | }

set up a coming soon page

• setup a coming soon page

• style page using TailwindCSS

Create Username Features Cards - Home page

Make all elements dynamic

User CRUD

User
Model

1. create user model with the following properties in addition to others

• id
• name
• email
• date_added
• aliases(one user->many aliases
• password(hashed)
• Role->user,admin

with a sql table script
2. CRUD functionality

Acceptance Criteria

• A user schema and table are defined and setup.
• User CRUD implemented.
• Test User CRUD.
• OpenAPI User Documentation

Check Tiktok Username

We need an API that can check if a tiktok username exists

Initial Repo setup for React

Right now, the repo is empty and needs to be setup for frontend dev in client subfolder

https://nextjs.org/docs/getting-started#automatic-setup

Backend Arch Design

We need overall architectural design for the project backend so that new contributors can understand the current and future state of the project.

Create a landing page

Create a landing page