Final JS project unification

[I3uckwheat]

Currently the final project in the JS course is an open ended project, we would like to instead move to using a common project much like the rest of the course. However, it is difficult to think about what this project should be. There have been good suggestions however, we would like to leverage the community for this.

Please keep in mind that this is the JAVASCRIPT section, not the NODE section.

The final project suggestions should include the following:

• Title of the project
• Description of the project
• Requirements of the project

The following guidelines should be considered:

• Hit as many skills in TOP as possible up to that point in the curriculum
• Be large enough to show on a resume
• Not be too large to take up a large amount of time
• Not be too small, getting people in the mindset of planning and refactoring is useful
• Easily understood: The project should not be too obscure

[TaylorJonesTRT]

What about a simplified and bare bones old school bulletin board (XenForo, Invision Power Board, vBulletin as examples)?

• Learners will need to implement a user system (signing up, logging in, alongside a default "admin" user).
• They would need to build a way for that default admin user to create new categories and forums within those categories.
• Functionality for allowing registered users to be allowed to create new "threads" and posts inside of threads.
• Basic moderation functionality (deleting threads, deleting posts, moving threads/posts to new forums/threads).
• Maybe allow registered users to be able to set a profile picture / avatar.
• Frontend would need to show all of the above off and maybe the latest thread posted in each forum on the homepage to show user activity.

This could either be fleshed out more, reduced to not as many requirements needed, or even have some changed. Bulletin boards / forums have so many different features that could be implemented or not as well.

[savwiley]

I very recently finished the JS project and there were several cons for me, namely the amount of time it took to complete compared to the previous projects. At the same time, it's an excellent resume piece, so I'm hesitant to suggest massive changes to the project overall. That said, here's my generalized suggestion based on both my experience on the project and recent technical interviews.

Instant Messenger

Create your own social media instant messenger! This can look more like an app than a full website but it should still have all the functionality of a website. Navigation should be easily accessible, responsive design should work seamlessly across devices, and proper HTML practices (like alt-text on all images) should be implemented. More than that, this is a social media site, so you should be able to talk to someone, too! Make it work and look like a site that you would want to visit.

Requirements:

• Not using a backend or Firebase means that real conversations won't actually work. That's okay, though! So long as you're able to create messages like you could on any IM program, this project can work out just fine. For a bonus, you can still save conversations using localStorage in the browser.
• Users should be able to log in and out at will. If you want to use a backend, you can use something like Firebase's Authentication for this. If not, it'll still be in your favor to create a form using form-based authentication, to at least help ensure your users aren't bots, and (possibly) allow them to "log out" when they exit your site.
• The instant messenger itself should have messages appear in real-time. Remember to separate conversations and uniquely identify each user.
• If you want to go further, you can allow users to edit or delete messages after they've been posted. You can even implement a language like markdown so that users can **bold** or *italicize* their messages before sending them.

Optional but Encouraged:

• If you've decided to use a backend or Firebase, create user profiles to display (non-sensitive) information about each user. You can also allow users to edit their own information like profile images and display names.
• Users should be able to send images if they wish. Again, Firebase is excellent for saving and storing image information, but you can also use something like Cloudinary to get the job done. If you're not using a backend, you can still allow users to send images. These conversations just won't be saved to a server.
• You can choose to populate your site with fake users! An API like RandomUser.Me can add that extra feeling of use to your site while also proving that you can use Promises and Async/Await functions. If you chose not to use a backend for this project, implementing Promises in some way could be a good idea.
• Work with a friend! Showing that you can use Git as a group with successful results can go a long way with a prospective employer. Just remember to share the workload evenly.

I'm not sure if this idea would actually lessen the time it takes to complete, but this feels like a well-rounded project while still being descriptive about the requirements. My main suggestion, though, is to keep the depth of the project so it can come off as a crown jewel on a resume while also not being as vague about requirements so that people can use as many skills they've learned thus far from TOP as possible.

[isaiahaiasi]

I have some thoughts on this that I need a little more time to iron out, but before that I want to bring one thing up, since it's already come up in both suggestions so far:

I think whatever the project is, it should probably not ask the user to implement image uploading. It creates a huge liability for both the learner and TOP itself. What happens when someone decides to upload CSAM to an unmaintained project, which TOP provides a direct link to? This is already a bit of an issue with projects like the Inventory App, where if you look hard enough you can definitely find inappropriate stuff trolls have uploaded, just by looking at a few of the top projects.

[Ishmam156]

I believe in accordance with how TOP is structured, a fulfilling final project for the JS section would be to create a replica of TOP.

• Title of the project: TTP (The Thor Project)
• Description of the project: A working replica of TOP where learners can follow a certain track of lessons and where admin can log in to make changes to the curriculum.
• Requirements of the project:

1. 0Auth or use other authentication service for creating two types of users: learners and admin
2. Have a backend containing information about the lessons and have atleast 2 tracks a learner can follow
3. Track how many lessons a learner has completed using when they press the completed button in each lesson
4. Try to model the lesson page following TOP's visual style but doesn't have to be restricted to just that
5. Admin view should have the ability to hide/disable a lesson and have basic stats such as number of total users and number of users added in last 7 days.

This is Hoody from the discord server :)

[twalton83]

@Ishmam156 keep in mind learners in the NodeJS track haven't done ANY backend at this point sans perhaps Firebase for basic things :) That is an interesting idea to keep in our back pocket though 🧐

[Ishmam156]

Ah, my bad, that is a fair point.. Without the backend part (auth/fetching the lessons), the suggested project then might not be that big of a task for a final project.

I'd like to make another suggestion then with trying to keep the backend usage to an absolute minimum:

• Title of the project: TOB (The Odin Blog)
• Description of the project: A blog website which allows a visitor to quickly look at some articles to increase their programming knowledge.
• Requirements of the project:

1. Ability to add markdown content in local folder that the website will parse and display to the visitor
2. Have the ability to add tags/categories to the content so that visitors may filter the type of blogs they want to see

• Optional Requirements of the project:

1. Have a like counter on each article which can be incremented by anyone and keep track using a backend service
2. Have a simple anonymous comment leaving system to provide feedback on each blog.

[aayushmau5]

Though there is a Blog API project in the NodeJS section, I think with what @Ishmam156 suggested, one can make the Blog project at the end of JS section with firebase, and then swap out the backend(i.e. firebase) with their own API. Thus, reusing the final JS project in the Blog API project.
We can also add some features like authentication, etc. to build on top of the existing project.

This allows learners to focus mainly on the backend/API without having to worry much about making the UI for blogs.

[krimoelbahri]

So, what i would suggest is doing a simple Social app
Mini Social Media

Requirement

• Using Authentication. to have users sign in and out.
• The project should have a main page, profile page.
• It should show Users and allow subscription.
• adding and removing posts.
• showing posts of users that you are subscribed to.

I think this will cover as much lessons from top as possible. It allow to practice routing, using forms, validation and managing states (since it's relatively a big project you can use Redux , context and Higher order components ... ) .
For backend using Firebase is enough here, you can limit it to only use Auth, firestore and maybe Storage also. I think that's all you need for this project.

[ZachPoole]

I've got a list of ideas for apps that I want to make in a google doc, but I don't know too much about both the curriculums where this project will be replaced. So I'll just drop them here just to get people's minds rolling with some possible ideas.

• Successful People Scheduler

  • There's some interviews from some really successful people that show that some of them schedule their entire day in 5 minute blocks
  • This could be basically a Google Calendar clone, but stripped down to just be the UI and CRUD functions with events
    • (Just event name, time, and category/color)
  • Would be nice to have some import/export function to get some sort of saved state involved so that it doesn't just delete on reload (most likely something in local storage)

• Project Management App

  • This app would have some CRUD functions for "Projects"
    • Project name, size, timeline, employees on the project, description, client name/details
  • Could also add some sort of Analytics page or even some filtering on the home page for Employees to see who's available to hop on another project, maybe even past projects

• Azure Work Items Re-hash

  • An app where the user can have CRUD functions for work items
    • Could add users/coworkers to work items
    • Ability to relate/link work items to each other
    • Ability to view work item details in either a modal or another window entirely
  • Filter for work item details: name, user, state of work item, ID, tags
  • Could force a hierarchy like Epics -> Features -> User Stories -> Tasks/Bugs
  • I think a toggle between a "results list" view and a "board" view would be a nice challenge

• Personal Retrospective App

  • At my old job they were pretty serious about setting goals and breaking those goals down into actionable steps so I wanted to make an app the facilitate that.
    • Emphasis on Goals being SMART (Specific, Measurable, Achievable, Relevant, Time-bound)
  • CRUD functions for a goal
    • Once you create a goal you attach a time frame. ex: I want to get to 900 rating in chess in 3 months
    • After creation the user is prompted to keep splitting the goal into smaller and smaller goals also with time frames
      • Sum of children goal's time frames have to be less than the parent goal's time frame. I can't have a parent goal of 3 months and have 6 children goals that will take 1 month each (6 months total)
        • This would kind of be the purpose of the app to try to get some accurate dates/timelines on goals
  • Import/Export functionality
    • PDF format would be nice
  • Bonus page could be a home page that would only show you your current goals for the day, week, month, etc
    • Or maybe a calendar/Gantt chart view

• Stripped Down Twitter Clone

• Stripped Down Trello Clone

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[JustWaveThings]

Stripped down GitHub Clone

Description of the project

A very stripped down GitHub Clone.

features that could be acheivable for JS final project?

My understanding of Git / GitHub is that GitHub is a hosting service for Git repos, and the work of versioning is done by Git. I am not suggesting that this project use or try to recreate Git, just really the GitHub UI with some features that simulate Git.

Things like:

• Create user accounts / profiles
• Create public repository.
  • Web form editor only (think copy paste)
  • allow branching
  • allow simple merging of branches
• Generate a hash for each 'commit'
• Show file diffs ('commit' history)
• Repo commenting system
  • create issues (logged in users)
  • view issues (anyone)
  • close issues (repo owner only)
• Local Storage / Cloud storage through Firebase

Things to exclude:

• Any uploading beyond profile image.
• No cloning or forking repos

Perhaps even a portion of what is above would be appropriate? Maybe generate fake repos and commit histories and limit the user to the repo commenting system.

My Google search for any example of existing student projects came to nil. Is it unique to say that you made a GitHub Clone?

[KevinMulhern]

Moved to discussion since this is still in the ideas gathering stage