Your place to find new gamers to play with based on personal preferences and gamer style. Totally anonymous.
TABLE OF CONTENTS
- snake_case on component name (should be a folder)
index.jsxfor the js component logic- PascalCase for naming other (apart from index) files with component name
- Data fetching in separate file from index
src/components/home
index.jsx
Home.scss
Note that if you know that a function is going to be re-used throughout the project, try to make it as a separate component.
Always use exports at the bottom of the file, never in line.
export default Input; //<-- good
export default Input = () => .... //<--- bad
export {
Something,
Else
}; //<--- goodCreate a fetch.js (or whatever you wanna call it)
import axios from 'axios';
const apiBaseURL = 'www.whatever.com'
const GET = url => {
return axios.get(`${apiBaseURL}/${url}`);
}
// if need for headers etc.
const headers = 'some headers';
const POST = (url, data) => {
return axios(`${apiBaseURL}/${url}`, {
method: 'POST',
headers,
data,
});
}
export {
POST,
GET
};In the react component:
//import the file at the top:
import { GET, POST } from './fetch.js';In component method:
async getData(apiEndpoint) {
const { data: Items } = await GET(apiEndpoint);
if (Items) {
// Set data to state
this.setState({ Items });
}
else {
// error
}
}When you want to add an icon to your component, you need to first add this line to the list of imports:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';To initiate the auto-fill-functionality of your IDE, add an empty import from the icon-pack you want to use. (e.g. free-solid-svg-icons or free-regular-svg-icons)
import {} from '@fortawesome/free-solid-svg-icons';Then, to begin adding icons, create an instance of the FontAwesomeIcon component like this:
<FontAwesomeIcon
icon={faPlus}
/>When you're typing inside the icon-prop, you'll get suggested hundreds of nice icons! If you press enter while you're selecting an icon you want to use, your IDE will likely add the icon to the empty imports-object at the top. Success!!
- Only build functional components , do not use class based.
- Variables and functions should always be declared using camelCase!
- Try to use
constas much as possible when declaring variables, but if values are going to change throughout uselet. - Use the Airbnb JavaScript style guide for a more concise way of writing javascript: https://github.com/airbnb/javascript.
When using state hooks in react, name the states as what they are! And always have set as the first word before the state itself (in the set part).
Do this:
const [count, setCount] = useState(0);Never do this:
const [count, countsetter] = useState(0);Visit: https://reactjs.org/docs/hooks-state.html for more information.
Use arrow functions throughout the components even when writing the base component function like this:
const test = () => {
return (
<>
</>
)
}Not like this:
function test () {
return (
<div>
</div>
)
}Notice: use fragments <> instead of <div> after the return.
Try to minimize the amount of lines of code as much as possible, DRY.
For instance do this:
const tempCheck = () => {
let temp = 22
if (temp <= 20) return true;
if (temp > 20) return false;
} Not this:
function tempCheck() {
let temp = 22
if (temp <= 20) {
return true;
} else {
return false;
}
}Note that there are no curly brackets in the first example in the if statement. ES6 makes it possible not to use these when only returning a value directly.
When sending data through props from one component to another try naming props as what their values are and indent properly by creating a new line for each prop you send (if it's more than one).
Do this:
<WeatherCard
temp = {item.temp}
type = {item.type}
windspeed = {item.windspeed}
humidity = {item.humidity}
/>
<WeatherData data = {item.data} />Do not do this:
<WeatherCard data1={item.temp} data2={item.date} data3={item.type} data4 = {item.windspeed} data5 = {item.humidity}/>(Tip: Download and use the vscode extension “Prettier”.)
There is a styling folder under shared with some global styling features that should be used throughout the project.
src/shared/styling
global.scss
_mixins.scss
_variables.scss
_breakpoints.scss
Import the global.scss file at the top of the local .scss file when styling components.
@import 'global.scss';Laravel is written with php, therefore it is essential to know how to write php correctly. Therefore checkout PSR-2. Laravel follows these standards and so will we.
- White space on new line between functions/methods
- Classes should be declared in PascalCase
- Variables, methods/functions should be declared in camelCase
- Keep it DRY
- If a function/method can do a lot of things, try to separate the functionality into two or more functions/methods
- Try not to overwrite controllers-method names, if you must, make a new controller method
- Name the files as what they are going to give, for instance do not name a controller that is handling CRUD for a ‘User’ something else than
UserController.
Routers connected to the same controller should not have whitespace between new lines in routing files. Whitespace between lines should occur when new routers are connected to different controllers.
For instance do this:
Route::get('/', [PostsController::class, 'index']);
Route::get('/p/create', [PostsController::class, 'create']);
Route::get('/p/{post}', [PostsController::class, 'show']);
Route::post('/p', [PostsController::class, 'store']);
Route::get('/profile/{user}', [ProfilesController::class, 'index'])->name('profile.show');
Route::get('/profile/{user}/edit', [ProfilesController::class, 'edit'])->name('profile.edit');
Route::patch('/profile/{user}', [ProfilesController::class, 'update'])->name('profile.update');Do not do this:
Route::get('/', [PostsController::class, 'index']);
Route::get('/p/create', [PostsController::class, 'create']);
Route::post('follow/{user}', [FollowsController::class, 'store']);
Route::get('/', [PostsController::class, 'index']);
Route::post('/p', [PostsController::class, 'store']);
Route::patch('/profile/{user}', [ProfilesController::class, 'update'])->name('profile.update');
Route::get('/profile/{user}', [ProfilesController::class, 'index'])->name('profile.show');
Route::get('/profile/{user}/edit', [ProfilesController::class, 'edit'])->name('profile.edit');
Route::get('/p/{post}', [PostsController::class, 'show']);Use shorter and more readable syntax where possible for instance, do this:
session('cart');
$request->name;Do not do this:
$request->session()->get('cart');
$request->input('name');Here is a list that for shorter and readable syntax:
For more detailed information on how to write methods, objects, validation etc correctly checkout https://www.mindtwo.de/guidelines/coding/laravel.
Images and icons are placed in the shared folder.
src/shared/assets
icons
images
In today's society, gamers can have a hard time fitting in and finding other mates to share their experience with. It can be due to social distancing, peer pressure, or mental illness. Our team has the solution to this problem. We wanted to create an application, targeted at gamers, to allow people to match with others based on personal gaming preferences with the hope that they can find new friends with similar interests. With our app, we provide gamers with a safe, easy to use, and fun environment for gamers of all kinds to meet and talk.
Start by cloning the repository. Frontend is the react-folder, backend is the Laravel folder.
- Install npm dependencies in the frontend-root (frontend/)
npm install
- To start the react-server, run
npm start
- In the files
src/shared/services/requestsandsrc/shared/services/preferences, edit the baseApiUrl variable to be equal to a suitable backend-endpoint (either deployed or local).
- Setup a Laravel environment. This can be done with either Homestead (good for Windows users), Sail (works with Docker), Valet (Mac-specific) or any other VM.
- Install backend dependencies in the backend root (backend/) by running
composer install
- Depending on which setup you chose in step 1, running the server differs. Check the docs.
| Page | Items |
|---|---|
| Landing page / |
Start page |
| Login, signup etc. /login /logout /register /verify /verified /already-verified /forgot-password |
Self-explanatory routes and methods for authentication |
The application is built on a group of N-N relations to users. A user can select multiple preferences, and those are categorised as:
- games
- genres
- player-types
- languages (langs)
- miscellaneous (miscs)
These all have potential for use in filtering suggested users in the match-controller, however only player-types, langs and miscs are currently used in filtering.
Furthermore, there is support for more superficial data. Users have a 1-1 relation to profiles, which hold profile-data such as image, display name, body. They also have a 1-N relation to times. Each row in the times-table represents one interval, either weekend or weekday. It is supposed to show which times a user can play.
Currently we support N-N relationships between users and roles. This means a user can have a multitude of roles, and new roles can be created in the admin-panel.
Each time a user interacts (e.g. presses YUP or NOPE) with another user, a row in the interactions table is saved. This row describes which user (subject) interacted with another user (object), and whether the interaction was positive (1) or negative (0). Each time this occurs, a query is executed to determine if the other user liked you back. If that is the case, a row in the matchups table is created. This table has a N-N relationship with users, so technically matchups support an indeterminate number of users. However, in the case of this application, we will be satisfied with 2.
The chat is dependent on Pusher for websocket-functionality, and currently has a few tables to get it working.
- sessions
- chats
- messages
A session can be created between two users if they have a matchup presently. Only one session per matchup can be created, and that logic is detailed in SessionController.§§§§§
Each time a message is sent from the frontend, rows in the chats and messages table are created to represent the message - from whom it was sent, if it is read, which session it is connected to, and more. Basically, 1 message per chat, one session has many chats/messages.
If you want to contribute to the chat, or to other Broadcast-based features, please read the Broadcast-section of the 8.0 Laravel Documentation, and make sure you are connected to our Pusher-account. If you're unsure, contact other contributors.
- Hannes Qvarnström Github
- Enzo Bomark Github
- Karin Stenwall Github
- Simon Lindelöf Github
- Jamil Bariche Github
- Oskar Boström Github
- Mehrdad Amini Github
Distributed under the GNU General Public License v3.0.