**This image showcases the client-side social media application.**
This project is a client-side social media application developed as part of the JavaScript 2 course assignment and later enhanced during the CSS Frameworks course assignment. It implements core CRUD (Create, Read, Update, Delete) functionalities for posts and includes a user authentication system. The application is styled using Tailwind CSS and built with modern web development tools like Vite and Vitest. While essential features are implemented, additional functionalities are planned for future contributors.
- Register New User: Allows users to create accounts.
- Login User: Authenticates users and provides access to protected features.
- Create Post: Users can create new posts with a title, body, tags, and media attachments.
- Read Posts:
- View all posts.
- View a single post by ID.
- View posts by specific users.
- Update Post: Edit existing posts (title, body, tags, and media).
- Delete Post: Remove a post from the system.
- React to Posts: Add emoji reactions (e.g., likes, dislikes) to posts.
- Search Posts: Search functionality for posts by keywords or tags.
- Sort Posts: Sorting functionality for posts by "Sort by Latest" or "Sort by Popularity".
The following features are planned but not yet implemented. Future contributors are encouraged to expand on this project:
- Follow/Unfollow Users: Enable users to manage their connections.
- View Followed Users' Posts: Display posts by followed users.
- Comment on Posts: Allow users to leave comments.
- Reply to Comments: Enable threaded replies to comments.
- Frontend: JavaScript, Tailwind CSS
- Build Tool: Vite
- Testing: Vitest
- Styling: Tailwind CSS, PostCSS, Autoprefixer
- API: Noroff API (v2)
This application uses the Noroff API for backend functionality. The API is provided to students for practicing and completing assignments. Below are key details about the API:
The base URL for the v2 API is: https://v2.api.noroff.dev/
All endpoints should be prefixed with the base URL. For example:
- Fetch Posts:
https://v2.api.noroff.dev/posts - User Authentication:
https://v2.api.noroff.dev/auth
The API has CORS enabled, allowing you to access it directly from localhost during development without encountering CORS errors.
- All content posted to this API is publicly visible to other students.
- Your account must use your Noroff email address.
- Ensure that the content you post is appropriate for this platform.
For testing purposes, you can use the following test user credentials:
- Email:
test1001@stud.noroff.no - Password:
passwordtest1001
Before running the application, make sure to set up the following environment variables by creating a .env file in the root of the project.
- Create a file named .env (example.env) in the root directory of the project
- Add the following content to your .env file, replacing your-api-key-here with your actual API key when deploying the app to production.
VITE_API_KEY=your-api-key-here- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository:
git clone https://github.com/your-username/your-repo-name.git
-
Navigate to the project directory:
cd your-repo-name -
Install dependencies::
npm install
Start the development server:
npm run dev
Build the project for production:
npm run build
npm run test
Contributions are welcome! If you’d like to contribute, please follow these steps:
Fork the repository.
Create a new branch for your feature or bugfix.
Commit your changes with clear and descriptive messages.
Submit a pull request
Developed as part of the JavaScript 2 and CSS Frameworks courses.
Built with Vite and Tailwind CSS.
Powered by the Noroff API.