Visit the live Website : Connect With ➡️
Connect With is a web application where users can connect and talk or share experiences. This project promotes togetherness and community. It can be difficult sometimes to talk about something when we don't feel that the person with whom we share does not understand or share the same ideas. Though it is a necessity as human to connect and belong. Connect With provides a safe place where everyone is welcome and can share, experience and participate in the community.
Unregistered user have a read only access and if they want to participate to discussions or ask question, they will have to registered.
- Develop a viable web application.
- Develop a user-friendly application.
- Develop a web application with space for improvement and optimization.
- Promote wellness and togetherness.
- Provide a safe platform where communities can share and talk freely.
- The targeted audience is You, Me and Everyone else!
- As a user I want a user-friendly, simple and interactive website.
- As a user I want to be able to access this application on different device with the same experience.
- As a user I want to find out what is the purpose of the website easily.
- As a user I want to be able to create a discussion group/room.
- As a user I want to be able to look for a discussion group/room.
- As a user I want to be able to share my experiences.
- As a user I want to be able to read the community experiences.
Considering the targeted audience, the sans serif type of font is the more appropriate because it is most often associated with simplicity and straightforwardness.
The website will use well known and popular font that are used online in order to bring to the user a "feeling of knowing".
-
Poppins for headings.
-
Lato for main content.
Sans serif will be use as a fall back if the fonts do not load. It is common as the main typographies are sans serif type.
- Some Font Awesome icons will be part of the website for better UX.
- The favicon was created from favicon.io.
The colours chosen for the website are simple.
- #325663
- #b1e9fc
- #634628
- #b08e6a
- #6a9eb0
Adobe Color explore was used to find the colour scheme with the community keyword. Compatibility and accessibility are valid and the color scheme and swatches are said color-blind safe by the accessibility tools.
The feel of the website is welcoming and simple to provide a quick access and learning process. It makes users comfortable.
There is a hero image to give some weight to the landing page and pictures in the coming event from the events.
-
For consistency across the website the navigation is present on all pages.
-
It is important to note that other functionalities are available through the url/admin accessing Django admin interface.
Profile allows users to customize their profile information. When a user sign up, a profile is automatically created so the post are published under the user username.
If a User changes its profile information accessible from the profile page and makes it public, then his information are displayed when posting a comment (i.e. picture, username), otherwise only the username is displayed and accessible.
User profile information will be accessible as a popup upon clicking on the user username displaying picture, username, email and about me profile information.
-
The chatroom present all the different chatrooms or discussion subject present on the website.
-
Users you can browse to see the different rooms define by a Name and a subject.
-
There is the possibility to create a chatroom when registered logged in.
-
When selecting a chatroom the user is directed to the discussion page.
-
Users can browse the discussion, the latest comment being at the bottom of the page.
-
Users can participate in the discussion when registered logged in.
- Contact us form. Add a form for user to be able to reach out to the website owner.
- Swear words checker. For a friendlier and safer space we will implement in the future a word checker to prevent abuse posting.
- The possibility to close or silence a discussion automatically that was not active for a period of time. Those chatrooms would be accessible with a past chats button.
- Search/sort functionality to be able to sort the chats and/or to look for specific subjects.
- Favorite. Create a favorite page where registered user can see their favorite discussion.
- Having an option to save some comment (not only the whole chat).
As a framework Django works with relational databases.
- During development, sqlite3 was used. It is the database provided by Django and only use for development.
- For Production, Postgres is used. It is the database provided by Heroku when deploying the website live.
- Profile Model
- Within the profile app, the UserProfile model define how the data will be stored for a user.
| Name | Key in db | Validation | Field Type |
|---|---|---|---|
| chatroom_id | chatroom_id | primary_key=True | AutoField |
| user | user | on_delete=models.CASCADE, related_name='user_profile' | ForeignKey to User |
| username | username | max_length=50, blank=True, null=True | CharField |
| about | about | max_length=2000, blank=True, null=True | TexField |
| image | image | blank=True, null=True | ImageField |
| make_public | make_public | default=False | BooleanField |
- Chatroom Model
- Within the chatrooms app, the Chatroom model holds the data needed for different chatrooms.
| Name | Key in db | Validation | Field Type |
|---|---|---|---|
| chatroom_id | chatroom_id | primary_key=True | AutoField |
| name | name | max_length=20, blank=False | CharField |
| subject | subject | max_length=145, blank=False, null=False | CharField |
| date_created | date_created | auto_now_add=True | AutoField |
- Comment Model
- Within the chatrooms app, the Comment model holds the data needed for different comments in each chatroom.
| Name | Key in db | Validation | Field Type |
|---|---|---|---|
| comment_id | comment_id | primary_key=True | AutoField |
| chatroom | chatroom | on_delete=models.CASCADE, related_name='comment' | ForeignKey to Chatroom |
| user | user | on_delete=models.CASCADE, related_name='comment' | ForeignKey to User |
| content | content | blank=True, null=True | TextField |
| date | date | auto_now_add=True | DateTimeField |
This project was developed using:
- HTML
- CSS
- Python
- Jinja templating language.
-
Balsamiq For creating wireframes.
-
Google Fonts For importing fonts.
-
favicon.io For generating the favicon.
-
Adobe Color For extracting the color scheme used on the website.
-
Am I Responsive? For providing screenshots of the responsiveness of the website across several devices.
-
Autoprefixer CSS online For adding prefixer in style.css for cross browser compatibility.
-
Git For Version control.
-
GitPod For Integrated Development Environment.
-
GitHub For hosting the repository.
Deployment information are published in a separate file for better readability. Please see DEPLOYMENT.md
This project is developed on Gitpod Workspaces IDE (Integrated Development Environment) committed and pushed to GitHub, to the project repository using Gitpod Command Line Interface (CLI) with Git version control.
It is a team project that was build by creating pull request in order to merge the code with main. The main branch has been protected and pull request have to be reviewed before to be merged.
Testing information are published in a separate file for better readability. Please see TESTING.md.
-
For the logo and favicon:
- Logo extracted from a set by ylivdesign Backlink strategy icons set. Outline set of backlink strategy vector icons for web design isolated on white background
-
For the hackathon group illustration on Code Institute hackathon page:
- Image by Margarita Seamless pattern with cute panda character, vector illustration