Code Monkey home page Code Monkey logo

seaphotos's Introduction

logo

SEAPHOTOS

Uma galeria de fotos e vídeos virtual com sistema CRUD das mídias e dos perfis cadastrados no banco de dados.

Tecnologias 💻

As tecnologias e linguagens utilizadas durante o desenvolvimento deste projeto, foram:

  • PHP 8.3.3
  • MySql 8.0
  • JavaScript
  • SQL
  • HTML
  • CSS

Serviços usados ☁️

  • Font Awesome

Como o site funciona? 🤔

1 - Index 📷

Ao entrar no site, teremos acesso a index, a galeria que reúne imagens de todos os usuários index

Nela, pode-se visualizar o título da mídia, a data imposta pelo usuário(opcional) e o nome do usuário que a enviou index

Além disso, ao clicar na lupa acima, pode ser feita a pesquisa de alguma mídia baseada no título

Search.System.mp4

Ao observar o canto superior direito, notamos que há uma imagem de perfil "default", o que indica que o usuário não está logado. Porém, ao clicar no menu lateral, temos acesso ao login e cadastro de usuários, além de diversas abas que necessitam de login para serem acessadas.

menu.mp4

2 - Login 🔐

Ao clicar no login pelo menu, em alguma outra aba privada ou na foto de perfil no canto superior direito, teremos acesso à página de login

SEAPHOTOS.login.-.Brave.2024-02-25.20-25-21.mp4

O login necessita de dois fatores: email e senha, sujos quais foram cadastrador pelo usuário. Basta preencher os campos e clicar no botão

login.mp4

3 - Cadastro ➕

Através do menu de navegação ou da página de login, pode-se acessar a página de cadastro

cadastro.mp4

Para se cadastrar, são necessárias informações básicas: nome e sobrenome, email e senha. Após tais dados serem preenchidos, o usuário será imediatamente redirecionado para a aba de perfil privado.

cadastro.mp4

4 - Perfil de usuário ⚙️

Podendo ser acessada pelo sucesso no login ou cadastro, a página de perfil de usuário é uma página voltada para o controle dos dados do usuário por ele mesmo profile

Para alterar os dados, basta clicar no botão "Alterar Informações e os campos serão liberados.

profile.mp4

5 - Adicionar mídias 🎞️

Seguindo pelo menu lateral, teremos acesso a área de adicionar mídias image

Para utilizá-la, basta digitar o número de campos para imposição de mídia de que deseja, e, então, eles serão renderizados abaixo

addfiles.mp4

Então, basta enviar a mídia e colocar uma descrição e uma data que desejar

sending.files.mp4

6 - Meus arquivos 🖼️

Através da caixa de sucesso após adicionar a mídia ou pelo menu lateral, pode-se ter acesso à página de controle de mídias enviadas image

Nesta página, podemos alterar ou apagar alguma mídia que desejarmos. Basta deslizar a tela e clicar no botão desejado

myfiles.mp4

seaphotos's People

Contributors

mrsampaio avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.