jbramirez03 / rehab-connect

A rehab website intended for former addicts to be able to connect with others and build relationships through posting to different milestones on the site.

Rehab-Connect

Summary

This is social website meant for former addicts to connect with others and build relationships in the hope of overcoming the day to day challenges that comes with recently coming out of rehab. This is achieved through posting to certain milestones on the site and viewing others stories as they have reached that milestone aswell.

Table of Contents

• Usage
• Credits
• License
• Challenges
• Technologies
• Npm Packages
• Future development
• How to contribute
• Questions
• Link

Development

A project manager tool was used in order to keep track of what everyone on the team was working on and to track the progress of the site itself. The github project manager was used through creating issues and assigning them to specific team members.

Usage

In order to begin adding your story to a milestone you must first create an account, this is done through the sign up page and after you create your account you are automatically logged in. Once you click on any specific milestone you can then add your story and through the form at the bottom of the page. Be sure to stay honest and remember that others on the site are going through the same hardships as you.

Landing page

Milestones

Profile

Credits

Jason Barrera-Ramirez

Qabas-al-ani

Taoufik

Chris

License

This Project is covered by the MIT license

Challenges

The main challenge found with creating this site was creating templates for pages and creating associated routes to render those pages, all the while rendering the correct information and making sure a good ui stayed intact. Another issue run into was creating handler functions to deal with a log-in post and a sign-up post and redirecting the client once a user is logged in.

Technologies

Npm Packages

• dotenv
• express
• mysql2
• sequelize
• nodemon
• bcrypt

Features

Features included in this site is keeping a user logged in even after leaving the site and being able to view a dashboard which displays all posts from the current user logged in.

Future Development

A definite path this site is headed is creating user profiles for a user and a page to render their profile with the ability to choose whether or not to keep a profile private.

How to Contribute

Fork the Repo and make a pull request for code to be reviewed and considered for merge to main branch.

Questions

If there are any questions about the project get in contact with me at my Email

Link

This is the link to the live site on heroku.

rehab-connect's Issues

set positioning for each div in handlbars

Make sure everything is centered and looks properly formatted.

Set up package.json file with npm modules

S

Comments model, for users to give comments of encouragement.

Create comments that link to a certain user and are generated from another user.

create partial templates to render details for each post/milestone

One partial for post details, and one partial for milestones

Make public js files for editing and deleting

Form handlers for both editing and deleting a users comments.

create dashboard routes and pages

Dashboard handlebars and api

Add route to delete user

Delete method route to delete a user from database.

Todo

Converted

Change fonts of page for accessibility

make font more easy to read.

create routes for user model

ex: login routes.

Make card headers clickable instead of just text

Make div header a href

Front-end styling --

Styling and creating structure to page.

create route to render post form

route that passes in logged_in session as well as user_id

create handlebar view for post submit form

create form that will take in new post properties

Create set milestones

Have 5 milestones to add posts to

Figure out which new technologies will be used in this project.

use a new npm package in code
Passport.js seems to be a viable option for authentication in node.js

seed database in order to test routes

seed milestone table to be able to post to milestones

Update user model to include profile information

About section, first and last name and an icon

create a functional navbar

through the use of flex-box or css framework create a style navbar

create models and datatypes

ex: set up relationships between models.

Create file structure

use mvc-paradigm structure

create routes for homepage rendering

ex: homepage, login page, signup page, posts page

figure out data structure for user profile.

Username, about section, email.

create routes to add new milestone for future development

In the case we want to add a new milestone we can do so through the use of this route.

create authorization middleware

Simple withAuth middleware that redirects user if they are not logged in and want to access post features.

create landing page that redirects to page with milestones.

Change margins for post edit form

Position the form inputs

Test

change font size

for card titles make every word first letter capital letter.

style handlebar views

position items and have styling done through a framework as well as a css file

Create form to update posts

Form to update a users post in the dashboard

Create controller routes for user profile pages and api calls

Routes to render user profile page

create routes for post model

ex: post route to create a new post

create handlebar views for user profile

Nicely formatted page with details about a user

Add footer to cards for '# posts'

change font size in card blocks with more spacing in between words.

create js file to handle new post submit

handler function that uses a POST route to add the new post to the database.

create routes to render login and sign up pages

forms for login and signup

create js files to handle login and signup api calls

form handlers

Add icons after milestone title text to indicate link

create handlebar view for homepage

Render all milestones with description of milestone with link to individual pages for each

create handlebar view for login/signup pages

Have a form in order to login user and form to be able to create a user.

add dashboard styling for profile information card

Card containing about info, nickname and full name