inctagram

Live Demo

📝 Description

Inctagram is a photo and video sharing social networking service.

📝 About the project.

The app allows users to upload media that can be edited with filters and organized by hashtags and geographical tagging. Posts can be shared publicly or with preapproved followers. Users can browse other users' content by tag and location, view trending content, like photos, and follow other users to add their content to a personal feed.

💡 Technologies

💻 Development

This project is developed using the Next.js library, along with various helper libraries such as React Hook Form, Axios, RTK-Query, and Redux. In addition, we utilize Jest for unit testing, and Storybook for documenting our UI components.

🛠️ Libraries and Tools

• NextJS: We chose Next.js as the basis for our project because it provides us with powerful capabilities for developing single page applications (SPAs) and statically generated sites (SSGs). Next.js provides fast page loading, easy page navigation, and server-side rendering.

• Redux: We use the Redux library to manage the state of the application. Redux provides us with a centralized data store and powerful tools for managing application state. We can easily update state, dispatch actions, and bind components to store data.

• RTK-Query: We use RTK-Query to simplify and standardize API work. It provides us with a convenient way to describe requests, handle responses, and cache data on the client side.

• React-hook-form: To manage forms, we chose the React-hook-form library. It provides a convenient way to manage form state and validate input. React-hook-form helps us build powerful and flexible forms by making it easy to work with user input with minimal code.

• Storybook: (not implemented yet) We use Storybook to document and showcase our UI components in an isolated and interactive manner. With a Storybook, we can easily explore different component states, test edge cases, and maintain visual consistency across our application. It serves as a valuable resource for both developers and designers.

• Jest: We utilize Jest in our project to ensure the correctness and reliability of our codebase. Its intuitive API, snapshot testing capabilities, and built-in code coverage reporting make it an excellent choice for testing our components and utility functions.

• SCSS: For the convenience of laying out the application components, we use the scss preprocessor. Using a preprocessor allows us to create more efficient and modular CSS code with support for mixins and variables, improves development productivity, and makes it easier to maintain styles in the long run.

• ESLint: ESLint helps us maintain a consistent coding style, identify potential bugs, and apply best practices. With ESLint, our codebase adheres to a single set of coding standards, improving readability, maintainability, and collaboration among team members.

• reCAPTCHA: We use reCAPTCHA to protect against spam and automated attacks.

⚙️ Project setup dev server

npm install
npm next dev

use yarn

yarn
yarn next dev

create build and start

npm next build
npm next start

use yarn

yarn next build
yarn next start

🔬 Tests

The project uses a jest framework for unit testing

npm run test

Requirements

To install and run the project, you need NodeJS v16.8+.

🔮 Future scope

• Paid account - Stripe, Paypall
• storybook component library
• Paid account - Stripe, Paypall
• Auto-renewal of a subscription *
• Buying more subscriptions
• Viewing the "My payments" table

🤝 Team ✨

It was developed by these wonderful people

Eugene Lipatenko 💻

Pavel Khrysto 💻

Gabriel 💻

Hanna A. Slivankova 💻

Sergei Minko 💻

Zhanet 💻

Vladyslav 💻