Feature#482

.github/CODEOWNERS

@@ -0,0 +1,6 @@
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# they will will be requested for
+# review when someone opens a pull request.
+
+* @emmebravo @DevinCLane @alcpereira @moses-codes @funbunch @merrua @intelagense

.github/workflows/fly-deploy.yml

@@ -0,0 +1,25 @@
+name: Deploy to Fly.io
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    name: Deploy App
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Fly.io CLI
+        uses: superfly/flyctl-actions/setup-flyctl@v1
+        with:
+          version: 0.3.155
+
+      - name: Deploy to Fly.io
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+        run: flyctl deploy --remote-only

.prettierignore

@@ -1,3 +1,4 @@
 build
 .nyc_output
 coverage
+CODEOWNERS

README.md

@@ -1,7 +1,4 @@
 <div align="center">
-<a href="https://deploy.cyclic.sh/GH_LOGIN/GH_REPO">
-    <img height="28px" src="https://deploy.cyclic.sh/button.svg" />
-</a>
 <a href="https://discord.com/channels/735923219315425401/1038482732633825442">
   <img height="28px" src="https://img.shields.io/badge/Discord-7289da?&logo=discord&logoColor=white" alt="Discord"/>
 </a>
@@ -31,9 +28,9 @@
   what's going on in the 100Devs community!
   <br/>
   <br/>
-  <a href="https://github.com/Together-100Devs/Together/wiki">Project Wiki</a>
+  <a href="https://github.com/Together-100Devs/Together/tree/main/docs/01-Team-Organization.md">Project Docs</a>
   ·
-  <a href="https://github.com/Together-100Devs/Together/wiki/04-Contributing">Contributing guide</a>
+  <a href="https://github.com/Together-100Devs/Together/tree/main/docs/04-Contributing.md">Contributing guide</a>
   ·
   <a href="https://together.rocks/"><strong>Link to project</strong></a>
   ·
@@ -75,7 +72,7 @@
 
 # 📢 About
 
-Together is a new app designed for 100devs. Together is a group calendar for public events, so you can see what's going on in your community. We're making it easier to find out about the events that are happening in Discord and let you know how much fun they'll be!
+Together is a new app designed for 100Devs. Together is a group calendar for public events, so you can see what's going on in your community. We're making it easier to find out about the events that are happening in Discord and let you know how much fun they'll be!
 
 <br/>
 
@@ -119,10 +116,10 @@ Together is a new app designed for 100devs. Together is a group calendar for pub
 
 ## 💻 Install
 
-- Read up on our [New Developer Onboarding](https://github.com/Together-100Devs/Together/wiki/02---Onboarding) in the wiki.
+- Read up on our [New Developer Onboarding](https://github.com/Together-100Devs/Together/tree/main/docs/02-Onboarding.md) in the docs.
 - Fork and clone the repository to your local computer.
 - Complete and store `.env` file in the `server/` folder
-  - [(See .env template setup instructions)](https://github.com/Together-100Devs/Together/wiki/02---Onboarding#development-machine-setup)
+  - [(See .env template setup instructions)](https://github.com/Together-100Devs/Together/tree/main/docs/02-Onboarding.md#development-machine-setup)
 - `npm install` in the root folder. installs the required dependencies.
 - `npm run dev` in the root folder. This starts the front-end and back-end in one terminal.
   - This runs a local instance of mongodb. You can connect to it by connecting to `mongodb://127.0.0.1:27017/` with any MongoDB client like [Compass](https://www.mongodb.com/products/compass).
@@ -155,17 +152,24 @@ We highly encourage you to ask questions and join the discussion in the [Togethe
 
 ## Help us improve Together!
 
-<em>Together</em> is a community-driven open source project backed by 100devs students. Whether you are helping us fixing bugs, proposing new feature, improving our documentation or spreading the word - <strong>All contributions are welcome.</strong>
+<em>Together</em> is a community-driven open source project backed by 100Devs students. Whether you are helping us fixing bugs, proposing new feature, improving our documentation or spreading the word - <strong>All contributions are welcome.</strong>
 
 <br>
 
 If you're interested in contributing, you may:
 
-- Read our [Contributing guide.](https://github.com/Together-100Devs/Together/wiki/04-Contributing)
+- Read our [Contributing guide.](https://github.com/Together-100Devs/Together/tree/main/docs/04-Contributing.md)
 - Join the [#Together thread](https://discord.com/channels/735923219315425401/1038482732633825442) within the 100Devs Discord to discuss your ideas.
 - Visit the [Issues tab](https://github.com/Together-100Devs/Together/issues) to request an issue or to open a new issue.
 - You can also convert a "draft todo" to an issue on the current [Project Board.](https://github.com/Together-100Devs/Together/projects?query=is%3Aopen)
 
+## Contributing Guidelines (abbrieviated)
+
+1. Comment on an <a href="https://github.com/Together-100Devs/Together/issues">issue</a> you'd like to work on.
+2. Wait to be assigned that issue on GitHub
+3. Once you are assigned, you are cleared to work on that issue.
+4. Proceed by following the Contributing Guidelines
+
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 <div align='center'>

client/package.json

@@ -2,7 +2,7 @@
   "name": "client",
   "description": "Client for Together App",
   "main": "src/index.jsx",
-  "author": "100devs",
+  "author": "100Devs",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -20,14 +20,12 @@
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.12",
+    "@tailwindcss/vite": "^4.1.10",
     "@vitejs/plugin-react": "^4.4.1",
-    "autoprefixer": "^10.4.13",
     "axios": "^1.1.3",
-    "http-proxy-middleware": "^2.0.6",
-    "postcss": "^8.4.18",
     "prop-types": "^15.8.1",
     "storybook": "^9.0.12",
-    "tailwindcss": "^3.2.2",
+    "tailwindcss": "^4.1.10",
     "vite": "^6.3.5",
     "vite-plugin-istanbul": "^7.0.0"
   },

client/src/features/adminDashboard/EventCard.jsx

@@ -8,7 +8,7 @@ function EventCard({ event }) {
         <li className="text-2xl md:text-3xl lg:text-4xl font-bold">
           {event.title}
         </li>
-        <li className="text-mainBlue">{event.description}</li>
+        <li className="text-main-blue">{event.description}</li>
         <hr className="border-teal-light" />
         <li>Scheduled by: {event.user?.displayName || "UNKNOWN"}</li>
       </ul>

client/src/features/auth/LoginWithDiscord.jsx

@@ -12,7 +12,7 @@ const LoginWithDiscord = ({ DiscordIcon }) => {
           type="submit"
         >
           <div className="flex border-2 border-slate-400 bg-white rounded-2xl">
-            <div className="flex flex-row space-x-3 py-3 px-8 m-3 bg-discordBtn rounded-lg font-bold">
+            <div className="flex flex-row space-x-3 py-3 px-8 m-3 bg-discord-btn rounded-lg font-bold cursor-pointer">
               <DiscordIcon className="w-7 h-7" />
               <span>Login with Discord</span>
             </div>
@@ -29,7 +29,7 @@ const LoginWithDiscord = ({ DiscordIcon }) => {
         className="flex items-center justify-center tracking-widest gap-3"
       >
         <div className="flex border-2 border-slate-400 bg-white rounded-2xl">
-          <div className="py-3 px-8 m-3 bg-discordBtn rounded-lg font-bold">
+          <div className="py-3 px-8 m-3 bg-discord-btn rounded-lg font-bold cursor-pointer">
             Logout
           </div>
         </div>

client/src/features/calendar/Calendar.jsx

@@ -69,14 +69,14 @@ const Calendar = ({ date }) => {
 
   // while we are loading events, add the "animate-pulse" class to show skeleteon loading effect
   let classNames =
-    "flex flex-grow h-full w-full overflow-auto text-gray-700 bg-white";
+    "flex grow h-full w-full overflow-auto text-gray-700 bg-white";
   if (status === Status.LOADING) {
     classNames += " animate-pulse";
   }
 
   return (
     <div className={classNames}>
-      <div className="flex flex-col flex-grow">
+      <div className="flex flex-col grow">
         {/* render error message if there was an error fetching data */}
         {status === Status.REJECTED && <div>{error}</div>}
         <AllDays />

client/src/features/calendar/DayCard.jsx

@@ -46,7 +46,7 @@ const DayCard = ({ date, events }) => {
       </div>
       {isFutureOrToday && ( // Only render the button if the date is >= current day
         <button
-          className="absolute bottom-0 right-0 items-center justify-center hidden w-6 h-6 mb-2 mr-2 text-white bg-gray-400 rounded group-hover:flex hover:bg-gray-500"
+          className="absolute bottom-0 right-0 items-center justify-center hidden w-6 h-6 mb-2 mr-2 text-white bg-gray-400 rounded-sm group-hover:flex hover:bg-gray-500 cursor-pointer"
           onClick={() => {
             let chosenDate = `${date.getFullYear()}-${(date.getMonth() + 1)
               .toString()

client/src/features/calendar/DayCardList.jsx

@@ -23,7 +23,7 @@ const DayCardList = ({ data, firstDayOfMonth }) => {
 
   return (
     <div
-      className={`grid flex-grow w-full h-auto grid-cols-7 grid-rows-${numRows} gap-px pt-px mt-1 bg-gray-200`}
+      className={`grid grow w-full h-auto grid-cols-7 grid-rows-${numRows} gap-px pt-px mt-1 bg-gray-200`}
     >
       {/* Empty div used for days that are not in the month */}
       {daysFromPrevMonth.map((day) => (

client/src/features/calendar/Event.jsx

@@ -1,5 +1,5 @@
-import { formatToLocalTime } from "../../utilities/calendar";
 import { useModalContext } from "../../contexts/ModalContext";
+import { formatToLocalTime } from "../../utilities/calendar";
 
 const Event = (props) => {
   const modal = useModalContext();
@@ -12,17 +12,17 @@ const Event = (props) => {
         modal.handleOpen();
       }}
       key={props.event.title}
-      className="flex items-center flex-shrink-0 h-5 px-1 text-sm hover:bg-gray-200"
+      className="flex items-center truncate text-clip md:text-ellipsis shrink-0 h-5 px-1 text-sm hover:bg-gray-200 cursor-pointer"
     >
       <span
-        className={`flex-shrink-0 w-2 h-2 ${
+        className={`shrink-0 w-2 h-2 ${
           props.event.confirmed ? confirmedCss : unconfirmedCSss
-        } rounded-full`}
+        } rounded-full hidden md:inline`}
       ></span>
-      <span className="ml-2 text-xs font-light leading-none whitespace-nowrap">
+      <span className="ml-2 text-xs font-light leading-none whitespace-nowrap hidden md:inline">
         {formatToLocalTime(props.event.startAt)}
       </span>
-      <span className="ml-2 font-medium leading-none truncate">
+      <span className="md:ml-2 font-medium leading-none md:truncate ">
         {props.event.title}
       </span>
     </button>

client/src/features/calendar/MonthAndYear.jsx

@@ -7,7 +7,10 @@ const MonthAndYear = ({
   return (
     <div className="flex items-center">
       <div className="flex">
-        <button onClick={handlePreviousMonth}>
+        <button
+          onClick={handlePreviousMonth}
+          className="hover:scale-110 hover:text-blue-500 transition-transform duration-200 cursor-pointer"
+        >
           <svg
             className="w-6 h-6 max-[440px]:w-4 max-[440px]:h-4"
             xmlns="http://www.w3.org/2000/svg"
@@ -23,7 +26,11 @@ const MonthAndYear = ({
             />
           </svg>
         </button>
-        <button data-cy="next-month" onClick={handleNextMonth}>
+        <button
+          data-cy="next-month"
+          onClick={handleNextMonth}
+          className="hover:scale-110 hover:text-blue-500 transition-transform duration-200 cursor-pointer"
+        >
           <svg
             className="w-6 h-6 max-[440px]:w-4 max-[440px]:h-4"
             xmlns="http://www.w3.org/2000/svg"
@@ -40,7 +47,7 @@ const MonthAndYear = ({
           </svg>
         </button>
       </div>
-      <h2 className="max-[440px]:ml-1 ml-2 w-[14ch] max-[440px]:text-base max-[440px]:text-center sm:text-3xl text-xl font-bold leading-none">
+      <h2 className="max-[440px]:ml-1 ml-2 w-[14ch] max-[440px]:text-base  sm:text-3xl text-xl font-bold leading-none text-center">
         {month}, {year}
       </h2>
     </div>

client/src/features/calendarHeader/CalendarHeader.jsx

@@ -49,7 +49,7 @@ function CalendarHeader({ date }) {
           onClick={() => navigate("/")}
         />
       </section>
-      <section className="flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-none justify-between mb-4 lg:mb-0">
+      <section className="flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-0 justify-between mb-4 lg:mb-0">
         <img src={Logo} className="max-w-none max-[380px]:w-9" alt="Logo" />
         <MonthAndYear
           month={date?.month}

client/src/features/calendarHeader/components/HeaderButton.jsx

@@ -1,7 +1,7 @@
 function HeaderButton({ Icon, tooltipText, ...rest }) {
   return (
     <button
-      className="p-2 sm:p-3 relative bg-[#F5E7DE] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg group font-inconsolata font-bold"
+      className="p-2 sm:p-3 relative bg-[#F5E7DE] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg group font-inconsolata font-bold cursor-pointer"
       {...rest}
     >
       <Icon className="max-[380px]:w-4 max-[380px]:h-4 w-6 h-6 sm:w-8 sm:h-8 text-[#C57756]" />

client/src/features/calendarHeader/components/TodayButton.jsx

@@ -1,7 +1,7 @@
 function TodayButton({ text, tooltipText, ...rest }) {
   return (
     <button
-      className="relative sm:p-2 sm:px-4 p-1 px-3 bg-teal-light shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg font-inconsolata font-bold"
+      className="relative sm:p-2 sm:px-4 p-1 px-3 bg-teal-light shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg font-inconsolata font-bold cursor-pointer"
       {...rest}
     >
       <span className="text-lg font-bold max-[440px]:text-sm">{text}</span>

client/src/features/form/FormConfirm.jsx

@@ -10,7 +10,7 @@ export default function FormConfirm() {
         <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
           Title
         </div>
-        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
           <p>{formData["title"]}</p>
         </div>
       </div>
@@ -19,7 +19,7 @@ export default function FormConfirm() {
         <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
           Description
         </div>
-        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
           <p>{formData["description"]}</p>
         </div>
       </div>
@@ -29,7 +29,7 @@ export default function FormConfirm() {
           <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
             Initial Date
           </div>
-          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
             <p>{formData["initialDate"]}</p>
           </div>
         </div>
@@ -38,7 +38,7 @@ export default function FormConfirm() {
           <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
             End Date
           </div>
-          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
             <p>{formData["finalDate"]}</p>
           </div>
         </div>
@@ -48,7 +48,7 @@ export default function FormConfirm() {
         <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
           Discord Name
         </div>
-        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
           <p>{formData["discordName"] || ""}</p>
         </div>
       </div>
@@ -57,7 +57,7 @@ export default function FormConfirm() {
         <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
           Location
         </div>
-        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+        <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
           <p>{formData["location"]}</p>
         </div>
       </div>
@@ -67,7 +67,7 @@ export default function FormConfirm() {
           <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
             Start Time
           </div>
-          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
             <p>{formData["startTime"]}</p>
           </div>
         </div>
@@ -76,7 +76,7 @@ export default function FormConfirm() {
           <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
             End Time
           </div>
-          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded">
+          <div className="bg-white my-2 p-1 flex text-slate-400 border border-gray-200 rounded-sm">
             <p>{formData["endTime"]}</p>
           </div>
         </div>
@@ -86,7 +86,7 @@ export default function FormConfirm() {
         <div className="font-bold h-6 mt-3 text-grey-500 text-xs leading-8 uppercase">
           Recurring
         </div>
-        <div className="bg-white py-4 p-1 my-2 flex border border-gray-200 rounded">
+        <div className="bg-white py-4 p-1 my-2 flex border border-gray-200 rounded-sm">
           <div className="border-r pr-6">
             <div className="flex space-x-4 items-center">
               <input
@@ -117,7 +117,7 @@ export default function FormConfirm() {
             </div>
           </div>
           <div className=" mx-7 ">
-            <div className="  flex space-x-4 items-center">
+            <div className="flex space-x-4 items-center">
               <input
                 type="checkbox"
                 value="1"