nicksramcik / banki-brunch

Banki Brunch

What Are we building?

A Web App for Banki Brunch to make hosting and crowd sourcing our answers to interview questions easier. We hold standups every saturday at 12:30 PM EST in our sub Discord Channel at 100devs.

---

Current landing page (In Development)

Questions inspired from 100dev's very own, 20jasper's interview-question-api

Development

This App uses NPM Node Package Manager to manage it's dependencies and packages.

from the root directory run

npm install

Create a .env file in the server folder and add your values.

For example:

 Right now we aren't using any secrets, but we will list references here when the time comes.

To Start the app in development mode

npm run dev

Database

Currently using dockerized mongodb

Docker Desktop will need to be installed to run the database

To bring database up

npm run db:up

To stop the database

npm run db:stop

Tech Stack (For now)

Front-End

---

• Vite - build tool that aims to provide a faster and leaner development experience for modern web projects.

• React - JavaScript front end library.

• Tailwind CSS - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

• DaisyUI - It is simply a plugin for Tailwind CSS, which works on all frameworks and has made development faster, and customizable for developers using pure CSS.

---

Leon's GitHub workflow

• Creator: Create a new issue

• Dev: Pick an issue

• Dev: Comment agreeing to work on the issue

• Dev: Assign issue to themself

• Dev: Make a branch, named with the issue number and description

• Dev: Make changes, commit changes

• Dev: Make a pull request (PR)

• Creator: Review PR

• Creator: Request changes

• Dev: Complete requested changes, commit and submit PR

• Creator: Approve changes, request merge

• Dev: Merge PR

• Dev: Delete issue-specific branch

• Creator: Close issue

Credit for list : puffalo

Contributing

---

We welcome contributions. Simply fork the repository open a pull request with your changes and @NickSramcik will review them.

banki-brunch's Issues

Question Selection Code Readability

Our randomized question selection code could use some refactoring and comments to make the code more readable and maintainable.

Answer Submission

Main page needs a submission form so users can submit answers.

Questions should each fetch submitted answers and display them under the question.

Something we need to figure out together: how should answers be rated? Something similar to codewars with separate qualifiers? (Clever, insightful, etc..) Should answers display who submitted them?

Mongodb installation

We need to install mongodb to our node packages and implement it on mongodb's end so we can start storing questions and answers on the back end.

Add Authentication

There is a need for user logins for answer submission and voting. We can do something similar to the Together app, where they use Passport's Discord strategy.

Basic Layout

We need a basic layout for Banki Brunch, including a button that renders a random interview questions, from a list of hardcoded questions. (We will connect a database later)

Readme Documentation

We need a readme to document out web application's technology, as well as a basic procedure for developers to contribute with.

Main Page Styling

We now have a functional basic layout, but it could use some extra flair. Perhaps some breakfast/brunch theming? I'm open to suggestions. We should consider having a consistent color palette as well.

Add typescript

Duplicate Questions

Our current randomized question selector has a slight chance of picking the same question more than once. We need it to check that the new question is not the same as the last one. If it is, it should pick another question.

Bonus points if we can write something that keeps track of which questions you've seen in your current session, and never selects a question you've already seen.

EJS cleanup

There are some EJS files in the project that are not being used, since we are using React. We need to get rid of those files without breaking anything. Should be easy enough... right...?

Docker implementation

We will need to implement Docker to help provide more consistent environments for testing our database on local machines.

Open Graph Meta Tags

Open Graph Meta Tags would make our application look nicer when shared with other people. They are behind that small card of information you may be used to seeing when someone shares a link on social media.

These are pretty straightforward to implement, so this should be a good issue for folks who want to contribute but are short on time or are maybe early in their coding journey.

Here's some documentation on how to make these work:

https://ogp.me/

Backend Architecture

We need to begin constructing our backend so that we can handle more flexibility with our questions and answers.

Specifically, we need:

• a model for questions and a way to submit new questions
• a model for answers, a way to submit new answers and rate old answers
• User authentication (Perhaps tied to discord like our together app?)

Favicon

Our web application could use a favicon, or the little icon that represents the website on browser tabs.

It's recently come to my attention that different devices prefer different sizes/dimensions for the favicon, so we may need to look into that.

Some resources on this topic:
https://www.seoptimer.com/blog/what-is-a-favicon/
https://favicon.io
https://www.favicon-generator.org/