GPKSP-Frames – a community-driven platform designed exclusively for the students of Government Polytechnic Kashipur. This guide details what GPKSP-Frames is, why we created it, and why it matters to our community. 🎓📸

What is GPKSP-Frames?

GPKSP-Frames is a non-profit, digital space where students can upload, share, and preserve college-related photos and memories. It serves as a living archive that captures the dynamic spirit of campus life, providing a glimpse into both the traditions and the everyday moments at Government Polytechnic Kashipur.

Why We Created GPKSP-Frames

💡 Purpose & Vision

• Community-Centered Platform:

  We believe every memory matters. GPKSP-Frames was built to unify students—current, alumni, and prospective—into one vibrant community. It’s a space to celebrate the unique experiences that make our college life unforgettable.

• Preservation of Legacy:

  College memories are fleeting but invaluable. By creating GPKSP-Frames, we aim to construct a digital legacy where every photo, every moment, and every memory is preserved for future generations. This archive not only tells the story of our institution but also inspires future students by showing them the rich tapestry of college life. 📜

• Empowering Expression:

  We understand that every student has a story to tell. GPKSP-Frames empowers you to share your experiences, express your creativity, and contribute to a collective narrative. Whether it’s a snapshot of a lively campus event, a quiet moment between classes, or a creative photo project, every post enriches our community.

• Non-Profit Passion Project:

  GPKSP-Frames is built out of passion rather than profit. Our mission is to give back to the community by creating a platform that fosters connection, creativity, and collaboration. There’s no financial gain here—only the drive to celebrate and preserve the essence of our college life.

Why It Matters

🌟 Impact on Our Community

• Celebrating Our Identity:

  GPKSP-Frames reinforces the pride of being a part of Government Polytechnic Kashipur. By showcasing real moments from campus, the platform builds a strong sense of identity and belonging among students and alumni.

• Bridging Generations:

  This platform connects different generations of students. Current students get to experience the campus life through the eyes of those who came before them, while alumni can relive cherished memories and stay connected with the evolving story of our college. 👩‍🎓👨‍🎓

• Fostering Engagement and Support:

  In our busy lives, taking a moment to reminisce can be deeply comforting. GPKSP-Frames offers a dedicated space to slow down, engage with heartfelt memories, and build supportive relationships among peers. The platform not only provides visual delight but also cultivates emotional and social connections. 🤝

• Encouraging Creativity:

  With features like photo editing, tagging, and detailed post descriptions, GPKSP-Frames encourages students to express themselves creatively. Each post is an opportunity to share your perspective and add to the diverse narrative of college life. 🎨

• Inspiration for the Future:

  The digital archive created through GPKSP-Frames is more than just a collection of photos—it’s an inspiration board for future students. By seeing the legacy of past and present experiences, newcomers can envision their own memorable journey at the college.

How to Get Started

1. Visit the Website:
   Open your browser and go to gpksp.in. 🌐

2. Register Your Account:
   • Click on the Register button.

   • Fill in your details: username, full name, email, and password.

   • Registration grants you full access, enabling you to follow other users and create posts. ✍️

3. Explore the Home Feed:
   • Discover the latest posts from your fellow students.

   • Click on any image to see more details, including the title and description. 🖼️

4. Create a Post:
   • Click the + icon to open the post creation dialog.

   • Upload your picture and use the built-in editor if needed.

   • Add a title, describe your feelings, and include relevant tags.

   • Publish your post to share your unique memory with the community. 🚀

5. Interact with Posts:
   • Like: Tap the heart icon to show your appreciation for a post. ❤️

   • Save: Bookmark posts you love to view later. 📥

   • Follow: Keep up with other users by following their profiles. 👣

Key Features

• Secure Authentication:
  Enjoy safe and secure login and registration processes that protect your data. 🔒

• Dynamic Home Feed:
  The home feed displays the latest posts and memories from across the community, ensuring you never miss a moment. 🏠

• Like & Save Options:
  Engage with content by liking posts and saving your favorites for quick access later. 💾

• Detailed Post View:
  Click on any post to see expanded details, including titles, descriptions, and tags. 🔍

• User Profiles:
  Manage your personal details, track your posts, and review your contributions to the community. 👤

• Easy Post Creation & Editing:
  With an intuitive interface, uploading and editing posts is straightforward, allowing you to share memories effortlessly. ✏️

• Responsive Design:
  Whether on desktop or mobile, GPKSP-Frames offers a seamless user experience across all devices. 📱💻

• Built on Modern Technologies:
  Leveraging tools like React.js, Appwrite, React Query, TypeScript, Tailwind CSS, and Shadcn, the platform ensures high performance and a modern, responsive design.

Code Snippets

index.html

Below is the basic HTML structure used for GPKSP-Frames, along with an explanation of each section:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Favicon for the site -->
    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.ico" />
    <!-- Ensures the page is responsive on all devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GPKSP Frames</title>
    <!-- Importing the Inter font from Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- The root element where the application will render -->
    <div id="root"></div>
    <!-- Entry point for the JavaScript application -->
    <script type="module" src="/src/main"></script>
  </body>
</html>

Explanation:

• <!doctype html>: Declares the document type to ensure the browser renders the page in standards mode.
• <html lang="en">: Sets the language of the document to English.
• <head> Section: Contains metadata and links to resources:
  • <meta charset="UTF-8" />: Specifies the character encoding for the document.
  • Favicon Link: Provides a small icon in the browser tab.
  • <meta name="viewport" ...>: Ensures the page scales correctly on various devices.
  • <title>: Sets the title that appears on the browser tab.
  • Google Fonts Link: Imports the Inter font family for styling text.
• <body> Section: Contains the visible part of the document:
  • <div id="root"></div>: This is where the application (e.g., a React app) will render its content.
  • Script Tag: Loads the main JavaScript file (/src/main) as a module, which initializes the application.

package.json

Below is the package.json file used for managing the GPKSP-Frames project dependencies, scripts, and configuration:

{
  "name": "gpksp",
  "private": true,
  "version": "0.0.6",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
 

Explanation:

• Basic Project Information:

  • "name": "gpksp": The name of the project.
  • "private": true: Indicates the project is private and not intended to be published as a package.
  • "version": "0.0.6": The current version of the project.
  • "type": "module": Enables ECMAScript modules in Node.js.

• Scripts:

  • "dev": "vite": Runs the development server using Vite.
  • "build": "tsc && vite build": Compiles TypeScript and builds the project.
  • "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0": Lints the project files.
  • "preview": "vite preview": Previews the production build.

• Dependencies:
  Lists libraries required for the project to run, including React, Appwrite, and various UI and utility packages. These dependencies power the front-end functionalities and integration with backend services.

• DevDependencies:
  Contains tools and libraries needed during development, such as TypeScript, ESLint, and Vite plugins, which help in maintaining code quality and building the application.

This package.json file provides a complete configuration for managing the project’s dependencies and scripts, ensuring that GPKSP-Frames is set up for both development and production environments.

Code Snippets: componet.json

Below is the configuration file for your component settings using the Shadcn UI schema. This file helps customize the component styling and behavior, as well as set up aliases for easier imports.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": " src/globals.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Explanation

• "$schema":
  Points to the Shadcn UI schema which defines the structure of this configuration file. This helps with validation and auto-completion in compatible editors.

• "style": "default":
  Specifies that the default styling is being used for the components.

• "rsc": false & "tsx": true:

  • "rsc": false indicates that React Server Components are not being used.
  • "tsx": true means that the components are written using the TSX syntax, which is the TypeScript extension for JSX.

• "tailwind" Object:
  Configures Tailwind CSS settings:

  • "config": "tailwind.config.js": Points to the Tailwind CSS configuration file.
  • "css": " src/globals.css": Specifies the path to the global CSS file where Tailwind is imported.
  • "baseColor": "slate": Sets the base color theme for the components.
  • "cssVariables": false: Indicates that CSS variables are not enabled.

• "aliases" Object:
  Sets up custom import aliases to simplify code management:

  • "components": "@/components": Allows you to import components using the alias components instead of relative paths.
  • "utils": "@/lib/utils": Similarly, sets an alias for utility functions.

This configuration file plays a crucial role in setting up and maintaining a consistent development environment, streamlining both the styling process with Tailwind CSS and the module imports with custom aliases.

Code Snippets: App.tsx

Below is the updated App.tsx file:

import { Routes, Route } from "react-router-dom";



        {/* private routes */}
        <Route element={<RootLayout />}>
          <Route index element={<Home />} />
          <Route path="/explore" element={<Explore />} />
          <Route path="/saved" element={<Saved />} />
          <Route path="/all-users" element={<AllUsers />} />
          
          <Route path="/create-frame" element={<CreatePost />} />
          
          <Route path="/update-frame/:id" element={<EditPost />} />
          
          <Route path="/frames/:id" element={<PostDetails />} />
          <Route path="/profile/:id/*" element={<Profile />} />
          <Route path="/update-profile/:id" element={<UpdateProfile />} />
        </Route>
      </Routes>

      <Toaster />
    </main>
  );
};

export default App;

Explanation

• Route Changes:
  • The route for creating a post is now /create-frame instead of /create-post.
  • The route for updating a post is now /update-frame/:id instead of /update-post/:id.
  • The route for viewing post details is now /frames/:id instead of /posts/:id.

These changes ensure that the naming aligns with the “Frames” concept of the GPKSP-Frames platform while keeping the rest of the functionality intact.

Code Snippet: RootLayout.tsx

Below is the RootLayout.tsx file, which defines the main layout for the application. It includes shared components like the Topbar, LeftSidebar, and Bottombar, and uses the <Outlet /> from React Router to render child routes.

import { Outlet } from "react-router-dom";

import Topbar from "@/components/shared/Topbar";
import Bottombar from "@/components/shared/Bottombar";
import LeftSidebar from "@/components/shared/LeftSidebar";

const RootLayout = () => {
  return (
    <div className="w-full md:flex">
      <Topbar />
      <LeftSidebar />

      <section className="flex flex-1 h-full">
        <Outlet />
      </section>

      <Bottombar />
    </div>
  );
};

export default RootLayout;

Explanation

• Imports:

  • Outlet from “react-router-dom”: This component acts as a placeholder for nested child routes, allowing different pages to be rendered within this layout.

  • Topbar, Bottombar, LeftSidebar: These are shared UI components that provide consistent navigation and layout structure across the application.

• Component Structure:

  • The layout is wrapped in a div with w-full md:flex classes to ensure full width and a flexible layout on medium-sized screens and larger.
  • Topbar: Rendered at the top, providing navigation and branding.
  • LeftSidebar: Placed on the left side to offer additional navigation or contextual information.
  • <section> with <Outlet />: This area is reserved for the main content, which is dynamically rendered based on the current route.
  • Bottombar: Displayed at the bottom, which can be useful for mobile navigation or additional actions.

This layout structure ensures that all pages within the application share a consistent look and feel while allowing the main content to change based on user interaction.

Verification Process in GPKSP-Frames

GPKSP-Frames is committed to ensuring that only authenticated and verified students can create posts on the platform. This verification step is critical for several reasons:

Why Verification is Necessary

1. Authenticity and Trust
   By verifying the student ID card, we ensure that the individuals posting content are actual students. This builds trust among users and helps maintain a safe and authentic community.

2. Preventing Spam and Abuse
   Restricting posting privileges to verified students reduces the likelihood of spam, fraudulent posts, or misuse of the platform by unverified or malicious users.

3. Compliance and Accountability
   Verification helps us comply with institutional policies and accountability measures. By ensuring that only verified students can post, we promote responsible content creation and community engagement.

4. Protection from Harmful Content
   If any student posts content that promotes harmful activities, violence, or inappropriate behavior, we have the ability to track and ban the student immediately. This ensures that the platform remains safe and free from content that violates our community guidelines.

How the Verification Process Works

• Student ID Card Submission:
  When a new user signs up, they must upload their student ID card. This document is used to verify their status as a student.

• Under Review Status:
  Once submitted, the student ID card is marked as “under review.” Users are informed that the verification process typically takes about 1 hour.
  During this period, the user sees a message such as:

  Waiting for verification…
  Your student ID card is under review. You must be a verified student to create a post. It usually takes about 1 hour to process. Please contact the admin if you think this is a mistake.

• Admin Review:
  Administrators review the submitted student ID card (or document ID). Only after this approval is the user granted full posting privileges.

Benefits for the Community

• Enhanced User Experience:
  The verification process ensures that all frames come from real, authenticated students, making the platform more reliable and engaging for everyone.

• Maintaining Quality:
  By limiting posting rights to verified users, GPKSP-Frames helps maintain a high quality of content and fosters a respectful community environment.

• Security:
  This step adds an extra layer of security, ensuring that users are who they claim to be, which protects both the community and the platform.

Verification is a critical step in GPKSP-Frames that not only helps secure the platform but also ensures that the community remains authentic and trustworthy. We appreciate your patience as we process the verification, which usually takes about 1 hour. If you have any concerns, please contact the administrator.

Beta Testing & Feedback

• In Beta:
  GPKSP-Frames is still in its beta phase. While you might encounter some bugs, rest assured we are continuously working to improve your experience. 🐞🔧

• Your Feedback is Crucial:
  We value every suggestion and bug report. Your feedback helps us refine the platform and add features that truly benefit our community. Please share your thoughts and help us build a better GPKSP-Frames. 💬✨

GPKSP-Frames is more than just a website—it’s a digital home for the memories, creativity, and spirit of Government Polytechnic Kashipur. Your contributions help preserve our legacy, foster connections, and inspire future generations. Welcome to a community where every frame matters!