项目作者: TristanVarewijck

项目描述 :
Block-Tech includes: Project-Tech, Front-end and Back-end
高级语言: CSS
项目地址: git://github.com/TristanVarewijck/Block-Tech.git
创建时间: 2021-02-04T10:11:50Z
项目社区:https://github.com/TristanVarewijck/Block-Tech

开源协议:MIT License

下载


banner

ActiveTogether / Filter - Feature

Shields that represent my project - They change over time. (https://shields.io/)

PRs Welcome Activity Isseus Language Count NPM MIT-License

Description

I am a Communication & Multimedia Design student at the Hogeschool van Amsterdam and I am currently in my second year.
For this block (block-web) I was given the task to build a feature for a matching app. it’s an app that allows people to create groups or find groups to join.
The groups you can join have restrictions: activities, duration, distance, and number of people. If you have joined a group, you have found a match. In this project I will create a filter feature where people can base their group on or with which they can find a group. We will be using back-end and front-end tools to create this feature.

Jobstory

When I plan to search for a match I want to set a group to allow a maximum of 20 people, so that I can search for groups with not too many people.

Table of Contents

Install

Clone the GitHub Repo locally

  1. git clone https://github.com/TristanVarewijck/Block-Tech.git

Install the Packages

  1. npm install

Start the Server

  1. npm start

.env Sample

You need the following keys to make a connection to the database.

  1. DB_URL="mongodb+srv://<username>:<password>@matching-app.oyitr.mongodb.net/test"
  2. DB_NAME=<databaseName>

Database structure

The database im using is mongoDB and its structured very simple. You can see the structure in the visual below:

database-structure
mongoDB -> database -> collection ->> data

Feature requirements

This feature should atleast filter:

  • All
  • Activities
  • Distance
  • Duration
  • Attendence

Used Tools

Visuals

These are the current visuals of the filter feature.

homescreen ui
filter ui

!mportant files

Of course all files are important but you should at least have a look at these files if you are interested in this repo.
Viewing these files will give you an idea of how this feature is built.

index.js :page_facing_up:

index.pug :page_facing_up:

styles.css :page_facing_up:

package.json :page_facing_up:

Meta

Tristan Varewijck - tristan.varewijck@gmail.com - https://github.com/TristanVarewijck/Block-Tech

Ask Me Anything !

License

Usage is provided under the MIT License MIT. See LICENSE for the full details.