SquadMate

The Ultimate Coaches ToolBox

SquadMate was built to address the challenges a team manager faces regarding communication between themselves and the teams they lead.The application stores data on member registration, medical information and any important documents needed to be prepared for upcoming events. This application can be used by a wide variety of groups for different events.

SquadMateDemo

Features

• Carousel
• Konami Code
• Document Upload
• File-system Routing
• User Profile Picture
• Breadcrumb Navigation
• Built-in Markdown Page
• Built-in CSS(Less) Support
• User Log-in, Sign-up and Log-out
• Custom Designed and uploaded Logo
• Print Function and icon for Emergency Cards, including a QRCode
• Made use of a Master Component Layout with Integrated Components file system

Installation

To install SquadMate use npm install:

Front-End: Repo

Back-End: repo

Technical Framework Usage: MERN Stack

• MongoDB
• Express
• React
• Node.js

Code Framework Style

• Material UI
• Custom Styled Components

Data References

Custom Secured Data usage.

Build Status

Deployed@SquadMate

Usage

Sign-in and/or Sign-up. There is an admin and user option, each having their own documentation privileges to navigate to with buttons. Administration will have ability to upload documents and print team emergency cards. User will have ability to update emergency card information and complete forms needed by admin.

Components for each setup:

    Administration          | Home Landing     | Team User
   ------------------------- ------------------ ------------
    Admin HomePage          | Sign-in Button   | User HomePage
    AdminProfile            | Sign-up Button   | UserProfile
    GetCardInfo             | Log-out Button   | InitialForm
    TeamList                | Picture Carousel |
    UserCard                | Documents        |
    EmergencyCard           | Lists            |
    PermissionsComponent    |                  |

Stretch Goals

• Team Chatrooms.
• Calendar integrations.
• Coach and Manager Notification Board.
• Turn the Custom Application into more widely used app.
• Random Picture Display of the Events, Teams or Individual players.
• AuthO is a third(3'd) party HIPPA approved and compliant identity management system.
• Ability to give message alerts to parents if a telephone number or signed off form is incomplete.

Challenges

• Time managing the two(2)-week sprint with all the features we would have liked to include in the project.
• Five(5) developers branching off to build features that were dependant on each other.
• Working with a team of developers on Zoom meetings across the USA and meeting for the first time.

Triumphs

• The ability to update a Profile Photo.
• Communication between team when pushing up code from a branch without merge conflicts was incredibly efficient.
• Applied the knowledge form the sixteen(16)-week coarse at DigitalCrafts Bootcamp to incorporated that knowledge into using MangoDB Database we did not cover during class.

Capstone Project Credits Go To The Following Builders

• Full-Stack Developer:Brittani Ericksen Front-End, LOGO-Design and WireFrame Layout.
• Full-Stack Developer:Justin Gardner Back-End, Design-Styles and Design-Ideas.
• Full-Stack Developer:Chris Owens Back-End, Design-Implementations and Deployment.
• Full-Stack Developer:Ryan Schniederjan PM/Scrum Master, including coding and LayoutWireFrames.
• Full-Stack Developer:Annemarie Thomas Front-End, Master Layout Components and ReadMe-Files.

GitHub Project Links:

Frontend Design & Backend Build

Miscellaneous

• Git and GitHub Commits, Merges and Branching.
• Firebase Google Storage.
• Used Trello as our guide for completing tasks from: To Do, Doing, Done.
• Trello provided the ability to have up to date communications on our project for all group members.
• Made use of collaborating on LiveShare VSCode when code-along was necessary for portions of the project.

Code Example Extraction

Data Base:

const connectDB = require('./config/db.js');
connectDB();

const mongoose = require('mongoose');

const connectDB = async () => {
    try {
        const conn = await mongoose.connect(process.env.MONGO_URI, {
            useUnifiedTopology: true,
            useNewUrlParser: true,
            useCreateIndex: true,
            useFindAndModify: false,
        });
        console.log(`MongoDB Connected: ${conn.connection.host}`);
    } catch (error) {
        console.error(error);
    }
};

module.exports = connectDB;

Team Model:

const teamController = require('./routes/teamRoutes.js');

app.use('/team', teamController);

const Team = require('../models/teamModel');

// Get All Teams
router.get('/', async (req, res) => {
    const team = await Team.find({});
    res.json(team);
});

const mongoose = require('mongoose');

const teamSchema = mongoose.Schema(
    {
        teamName: {
            type: String,
            required: true
        },
    }
);

const Team = mongoose.model('Team', teamSchema);

module.exports = Team;

Cors:

const cors = require('cors');

const corsOptions = {
    origin: '*',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: false,
    optionsSuccessStatus: 204,
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers':
        'Origin, X-Requested-With, Content-Type, Accept',
};

app.use(cors(corsOptions));

Support Services

These great services support SquadMate's core infrastructure:

The End.