CSCI 379 - Full Stack Web Development

• Course Details
• Changes to the Syllabus
  • February 12
• Overview
  • Topics Covered
  • Philosophy
  • Why Elixir/Phoenix?
• Course
  • Seatmap
  • Semester Flow
  • Grading Rubric
  • Homework / Participation
  • Final Project
• Course Policy
  • Self Grading
  • Penalties for Incorrect Grading
  • Grade Change Requests
  • Keeping your Git Repository up to date
  • Sharing Code
  • Professionalism
  • Joining late to the course
  • Academic Responsibility
  • Accessibility
  • Student Athletes

Course Details

• Class Room: Dana 325
• Class Time: MWF 1:00 - 1:50 pm
• Instructor: Alexander Fuchsberger, PhD. MA. MS. (please just call me Alex)
• Office Hour: Dana 338 Book Appointment

Changes to the Syllabus

as agreed by students by majority vote, effective immediately from the day of voting. Any changes in this section take priority over conflicting statements in the remainder of the syllabus.

February 12

• Instructor will do his very best to upload all video material for the given week by Saturday night. There may be optional videos designated with (Bonus) that are not required to watch but provide deeper insights for students who are interested. They do serve for additional content for Friday lectures.

  • This gives students a few extra days to watch them

• Monday and Wednesday we work on assignments that are released shortly before lecture and related to the videos. This is unchanged from the current system except that no objectives grading takes part during these sessions (so you can focus solely on the assignments). Participation grading is unchanged and still present.

  • This gives students more time in-class for the assignments

• Friday I don't release a new assignment and the session should be used to:

  • Grade all assignments from the previous week
    • If your partner is not present you don't have to do any grading.
    • There will be no objectives and participation grading for the Friday itself.
  • propose current concepts by Thursday Afternoon and if it fits or is important to the class I will cover them for everyone in the lecture time with you having a chance to ask questions and conversation.
  • general / individual Q&A as time permits
  • work on completing previous assignments
  • work on your final project (will be introduced this Friday)

  This will give students not only significiant more time to complete assignments but also more opportunities to visit me for help during office hours.

  • The grading rubric distribution of 75% assignments and 25% final project will remain unchanged but there will be less total points for the assignment category making each assignment slightly more contributing.

  • Since you are having now having at least 8-10 days time per assignment i am removing the joker system, where each student could ask 3 times for regrades of any kind up to a week afterwards.

    • Note that if you want to dispute a grade (feel it was unfairly graded) you can still do that up to a week after you were graded and I'll have a look myself.Remember for that case the timing of your commits on Git is relevant.
    • If you can't make it on a Friday (grading day) you should see me before that Friday to get the past week's assignments graded, no exceptions.

  Unfortunate Sideeffect: Removing content from Friday classes to slow down the pace will mean that we will cover 1/3 less required content for the remainder of the semester. I will go through the list of remaining topics and move things around so that less important topics fall on Fridays with the (Bonus) designation.

Overview

This elective course offers students an opportunity to learn functional programming principles using the Elixir programming language. Additionally, it provides an in-depth exploration of state of the art web development, both on the frontend and backend, using the Phoenix MVC framework and TailwindCSS.

Topics Covered

• Introduction to functional programming paradigms
• Elixir syntax and data types
• Error and exception handling and coverage testing in Elixir
• Introduction to web development with Phoenix framework
• Building RESTful APIs with Phoenix
• Implementing real-time communication in web applications
• Validating and saving user input through forms and PostgreSQL database
• Front-End UI Design and interactivity using TailwindCSS and Phoenix LiveView
• Front-End UI Design with mobile-first, accessibility and User Experience (UX) in mind
• Usage of industry-grade project management strategies such as issue tracking and git
• Deployment via Cloud based services and Bucknell Network

Please see the section schedule for a more detailed list of topics. Topics and topic order are subject to change throughout the semester.

Philosophy

I have spent quite some time contemplating how to streamline and convey information that took me years as a hobbyist to accumulate in a way that prepares you most effectively for the job market within a single semester. My goal is that if you successfully complete this course and manage to convey your new skill set during an interview, you will have a good chance of landing any job where the ad reads "Junior Web Developer." Furthermore, you should have an excellent chance of landing jobs that read "Junior Elixir/Phoenix Developer" or something similar.

In this age, it would be foolish not to acknowledge the tremendous potential AI can have on the learning experience. I myself use it constantly as a companion to complete complex functions, substitute the need to look up something I already know in the documentation (for a faster development cycle), or let it take control of mundane tasks such as writing tests. Thus, I will not restrict any usage of AI and will maintain a completely open policy. I care about your product, not the means by which you accomplish it, as long as you are not violating any moral or licensing restrictions. I bet my right hand that most companies follow a similar philosophy.

I think there is no better time than now to learn web development properly. Almost every week, new frontend-component libraries are popping up, and the landscape is in constant flux. While the specifics you will learn in this course may quickly morph or even become obsolete in the not-so-distant future, this is the fate of all programming languages—especially in web development. On the bright side, I can promise you that you will learn to adapt quickly, and the patterns you find in this course will appear in other tech stacks. You will never have to start from scratch.

Further, I would like to emphasize the benefit of having a positive attitude towards coding and the willingness to step outside your comfort zone. Forget what you already know about code style, VS Code plugins, or paradigms; keep an open mind. Let me try to convince you of new ways of doing something you already have experience with. Once you have tried what I suggested, and if you still like your approach better, by all means, don't let me stop you. But give things a genuine try first—that's important. If you don't find joy in facing and overcoming coding challenges, if it's not fun for you to explore and create solutions, then you might be in the wrong course.

I also know for a fact that many of you who made it into the course are here for very good reasons and have already taken steps on your journey in web development. I'll do my best to support you in your personal journeys and projects as far as my time allows.

With so many of you having good cause and (with one exception) exclusively seniors enrolled, I believe you are mature enough to self-grade the majority of your work in this course. Thus, I will let you validate and grade each other's work, and I will only step in to resolve disagreements and ensure your evaluations are genuine.

Why Elixir/Phoenix?

To the best of my knowledge, this is the first full-stack web development course at an undergraduate university level nationwide to feature the Phoenix/Elixir tech stack. I will elaborate on the reasons behind this choice over other, more mainstream stacks in detail below.

I genuinely believe that you will land your first job and build your career by standing out for being proficient at one thing, not by being an amateur at everything. Once you gain work experience, the necessity to expand your knowledge and adapt will naturally follow.

I have had a passion for web development for about 16 years, and during this time, I have experienced several popular developments in the field. My humble beginnings started with plain HTML and CSS in high school as I attempted to create my own website. I then delved into PHP and content management systems like Joomla, WordPress, and others. For years, I maintained a side gig creating and managing a website for a photography studio in Innsbruck, Austria. I didn’t pick up JavaScript until my first post-undergraduate job as an Online Marketing Manager. At that time, jQuery and Bootstrap were very popular, so my focus shifted heavily in that direction.

Later, a friend introduced me to Phoenix/Elixir. However, at that time, the framework was still in its infancy, and there were few resources available for learning. The learning curve was simply too steep, there was no AI assistance, and I had to give up on it temporarily. I wouldn’t return to it for another three years.

In the interim, I worked on a project for a German role-playing community, equivalent to Dungeons & Dragons. My mission was to implement the ruleset of the game into a browser-based adaptation.

React was becoming popular, but before diving into React, I explored an MVC framework called Sails.js, based on Node.js. I saw the immense potential of using a full-stack framework with sophisticated, reliable, and productive tools under the hood. While the responsiveness of React was impressive, maintaining and syncing it to a backend was a nightmare—especially with a database more complex than simple SQL CRUD (Create, Read, Update, Delete) operations.

This brings me back to Phoenix/Elixir. The slogan on their website literally reads:

Build rich, interactive web applications quickly, with less code and fewer moving parts.

I decided to give Phoenix another try by reimplementing the RPG project using Phoenix, and this time, it clicked. The process was smooth, as a lot had changed since my first attempt. The framework’s documentation and its related libraries were outstanding.

Soon after, LiveView was released, completely revolutionizing frontend development by eliminating much of the need for JavaScript on the frontend, among many other features you will discover in this course.

To conclude, I am not a die-hard fan of Phoenix, blinded by love for the framework. Instead, I have kept an open mind, explored different options, and remained unbiased and open to other developments. The landscape of web development is in constant flux, changing faster than ever before, and it’s possible that in just a few years, something else will take over the market. More reasons will emerge throughout the semester, but for now, I ask you to trust me that Phoenix/Elixir is an excellent choice for a true full-stack experience. This course will cover everything from front-end design to backend database migrations and deployment, providing you with a strong foundation to navigate the vast landscape of web development.

Course

Seatmap

Every student is assigned a letter that he/she will keep for the remainder of the semester. This letter determines website url among other things but most importantly it is used to determine a student's seat assignment during each class.

Make sure you always sit on your allocated seat (which changes every lecture). This is important because a majority of grading depends on peer grading and a healthy variety of partners.

Also familiarize yourself with today's seat assignment before coming to class to ensure a smooth start into the lecture.

Semester flow

To truly grasp the implications of working on a full-scale application, every assignment throughout the semester builds towards a bigger goal—a fully interactive, professional web application that you develop on your own and can be proud of. At the end, you will select the components that suit your needs and package them into a consistent and comprehensive application. Part of the final project involves cleaning up, catching up on testing, and hiding or removing unused components. While the entire last week of the semester is dedicated to finalizing your project, 90% of the work on it happens throughout the semester.

Except for the first and last week, every lecture in the semester will follow the same flow:

Before the Lecture

1. Watch the assigned videos and read the materials.
2. Complete the assigned homework.

Lecture

1. Find your assigned seat and partner.
2. Grade your partner's homework (~5 minutes).
3. Work on the homework assigned for the next lecture together with your partner (~45 minutes).
4. Grade your partner's participation (~1 minute).

In the last 3-4 sessions of the semester, no new lecture content or homework will be introduced, and the lecture time will be solely dedicated to completing your final project.

As you can see, we will heavily utilize a flipped classroom style. It is crucial that you come prepared by watching the videos and reading the materials.

It is also paramount that you do not work ahead on current or future assignments, as this could leave your partner stranded. If you are eager to learn more and do extra work, there is always progress to be made on your final project by improving or further developing the components you’ve already worked on in previous assignments.

In fact, I never want to see anyone leaving the classroom early because they’ve completed the next homework during class. Instead, use that time to build towards your final project, help your partner catch up to earn participation points, or find another way to make yourself useful.

Throughout the lecture, I will be moving around, trying to answer your questions or provide further explanations and clarifications for concepts already covered in the videos or assigned readings.

But let's be realistic. There are 24 students in this class working on sophisticated coding assignments, there is no TA (this is the first time this course is being taught), and I am lucky if I can assist half the students who have questions in the short, 45-minute window we have.

Please don’t get disappointed if I don’t make it to your screen. You are expected to come to office hours, as those are the best 1-on-1 sessions and a much better environment for discussing your code with me without rushing.

Before raising questions and waiting with your hand up for ~15 minutes, I encourage you to:

1. Figure it out together with your partner and/or AI (!!!)
2. Extend your discussion to your entire table. With 4 people, there's a good chance someone can help.

Grading Rubric

The rubric consists of only two items:

• Assignments / Participation 75% (300 points total)
• Final Project 25% (100 points total)

Assignments / Participation

• Every assignment has objectives that are worth 7 points, and it is due by the next lecture.

• Every lecture, you will receive a participation grade from your partner or me, ranging from -2 to 2.

  • -2: Given if you don't show up to class. This is non-negotiable and includes reasons that are not your fault, such as getting sick, being invited to dinner by the president, or almost dying in a car accident. The only exception is if I receive an official note from the dean regarding emergencies for specific students. During the period this note is in effect, you will receive a participation grade of 0 instead of -2 if you don't attend class.
  • -1: Given if you made a bad impression on your partner because you were either unpleasant to work with, completely discouraged your partner from asking you any further questions, or were absent for a large portion of the lecture.
  • 0: Given if you were generally not much help, kept to yourself, came late, or left early.
  • 1: Given if you were helpful, or at least tried to be helpful.
  • 2: Given if you were very prepared, helpful, and pleasant to work with, not just in intent but also in execution.
  • If your partner is missing and you are present, you will always receive 1, regardless of other factors. The instructor will assign your participation grade.

To earn the full score for a lecture, the expectation is to achieve 8 points. Your objective score plus participation score is capped between 0 and 8 points.

The lecture before break is special and only has 3 points worth of objectives. Your expectation is to achieve 4 points. I believe breaks should be a time to relax, so I prefer to drastically reduce homework over the break but keep a tiny exercise to ensure you're prepared for the lecture after the break.

Final Project

More information on the grading of the final project will be provided later in the semester. Here is the Grading Rubric.

Course Policy

Self Grading

Every lecture, you are expected to grade your partner's homework according to the homework rubric in a fair and consistent manner. I have tried to make each objective as binary as possible — it's either fulfilled or not. There should be no ambiguity for any objective and there is no partial credit. If in doubt, ask me.

The course management tool automatically enables grading at the start of the lecture and closes grading after 1 hour. During that time you are expected to get both your partners's objectives and participation grade in. Please take care of the objectives grading at the beginning of the lecture and set the participation grade at the end of the lecture. Whatever is selected will automatically submitted after 1 hour can can no longer be changed by the student.

If you are missing class you should not touch your partners grading section (the professor will grade instead).

If your partner is missing class you should be putting a -2 in the participation grade and 0 for all objectives. It's your partner's responsibility to visit me in office hours and show me that you completed the assignmnent in order to earn the lost points back. Also, find me in class, so i can grade your assignment!

If you are present in class but didn't complete grading your partner by the end of the lecture 1 point will be deducted from your own participation score for that lecture.

If students drop class througout the semester and the enrollment falls to an odd number of students there is always one person without a partner. In this case that person is relieved from duty of grading another person but needs to find the professor during class in order to get his/her work graded.

Penalties for Incorrect Grading

If I ever catch you deliberately faking the grading (for example, not giving a -2 even though your partner was missing), there will be a -4 point deduction added to the overall grade. This penalty will double for each subsequent violation. Once caught, I will be watching the perpetrator closely for the rest of the semester.

I will randomly sample your grading throughout the semester to ensure you are taking this seriously.

Grade Change Requests

If you feel you were incorrectly graded, or if you have questions about either your grading or how to grade, I encourage you to speak with me. I will not penalize you if your intentions were genuine. Incorrect grading can be resolved. However, keep in mind that the project will evolve over the semester, and you may inadvertently change or remove code for older assignments.

Therefore, I accept grade change requests for homework objectives only up to a week after they were due, and only if you book an appointment during office hours and visit me in person. I will not review any requests sent via email, as it requires a back-and-forth dialogue, and email is not the ideal communication tool for that.

You may also use this opportunity to improve on an assignment that you simply didn’t have time to complete before the due date, up to 3 times during the semester. I won’t judge or question why you had a tough week. If you put in the effort to complete the assignment, book an appointment, and show me your completed work, I will reward your effort accordingly. However, I ask that you "bundle" regrade requests and not visit office hours more than once a week for this purpose. Remember, I will stop accepting regular regrade requests after 3 office visits. Bundling your requests allows you to get more assignments covered for regrading.

If you visit me to change a 0 grade because you missed class you can do so up until a week after class. This does not count towards your 3 "Grade Change Wild cards." Only your objectives grade will be updated, never your participation grade.

I do not accept grade change requests for participation grades. Your participation grade was determined by your partner, and I have no way of remembering or judging if their evaluation was valid. I encourage you to ask the person for feedback so you can improve your participation grade for future lectures. The only cases that should be brought to me are:

• You received a participation or objectives grade from someone who wasn’t in class.
• You received a -2 on your participation grade even though you were in class.

For those cases, talk to me immediately after class, not later (I will likely forget whether you were in class or not by afternoon).

Keeping Your Git Repository Up to Date

To ensure completion by the due date, you are expected to keep your repository up-to-date and pushed by the due date and time. Having the website up-to-date on Linux-remote but outdated on GitHub will invalidate any claims regarding requests if the code is outdated by more than a week.

Sharing Code

While you are encouraged to work with AI, you are also encouraged to collaborate with your peers inside and outside the classroom. I hope that you will actively discuss code and strategies for solving the objectives.

However, what absolutely disgusts me is if you simply share your code/solutions in a passive and unidirectional way, perhaps shortly before something is due. Do not allow anyone to trick you into giving them direct access to your codebase. Working side-by-side in and out of classroom especially with your partner is okay and encouraged. If I see the same or too similar code/output on your web application and deduce this was plagiarism as described in the previous sentence, I will treat the incident for all involved students with the penalties outlined in the section Penalties for Incorrect Grading.

For your own sake, you are encouraged to provide links in your code comments to where you retrieved information (so you can later look it up again), but there will be no penalties for not citing code or whether it was AI-produced or not.

Professionalism

Ensure your phones are silenced, and never be even a minute late for class or leave early. Be polite, patient, and professional towards your peers and professor inside and outside the classroom.

This class takes place at 1:00 pm, and most of you will come directly from lunch. Do yourself and the people around you a favor and use mouth freshener before class. Do not bring your lunch to the lecture.

Bring your headphones in case you need to rewatch video material, but do not have them on when you are not actively watching a class video so your partner can communicate with you.

Joining Late to the Course

I accept late joiners during the first (no restrictions) and second (with dean's permission) week of the semester according to official regulations. In the rare event that someone joins the course late, all previous objective points can be earned by completing the assignments within one week of the official join date (as shown on BannerWeb). Participation points will be set to 1 for attempted assignments and 0 for unattempted assignments.

Academic Responsibility

One of the most important aspects of this course is that it is set up to emphasize the development of your self-reliance and independent learning skills. There will be many occasions in which you will need to stretch yourself to find an answer to a programming or research problem. This will require that you use wisely the resources available to you on the web and through your peers and the instructor. Courses at Bucknell that receive one unit of academic credit have a minimum expectation of 12 hours per week of student academic engagement. Student academic engagement includes both the hours of direct faculty instruction (or its equivalent) and the hours spent on out of class student work. If you make sure to account for this time in your weekly schedule, you will certainly learn a lot in this class and the grades you earn will reflect that.

Accessibility

If a student needs to sit in a specific seat throughout the semester for accessibility reasons please do let me know at the beginning of the semester so i can program the Website to not randomly switch your seat at each lecture.

Any student who needs an accommodation based on the impact of a disability should contact the OAR at oar@bucknell.edu; 570-577-1188 or complete the Disability Accommodation Request form. The OAR will coordinate reasonable accommodations for students with documented disabilities.

If you have a disability and think you may need an accommodation, I encourage you to contact the OAR. The OAR is here to help and will work with you to determine appropriate accommodations. If accommodations are needed, the OAR will communicate those to me through a Letter of Accommodation. I will not be given information about the nature of your disability, only the accommodations you need. I will treat any information I receive as private and confidential. Please visit https://www.bucknell.edu/life-bucknell/diversity-equity-inclusion/accessibility-resources for more information about the OAR.

Student Athletes

If you are a student-athlete, remember that you are a student first and an athlete second. This means that academic work is your first priority. As per University rules, you will not be penalized for being away to take part in athletic events. It is your responsibility, however, to manage your time wisely so that you can do well in this and in your other classes. Please make sure to notify me well in advance of your travel schedule and to work out a make up schedule for activities.